:root{
  --bg:#0a0d10; --panel:#12171b; --panel2:#161c21; --line:#1f2a30; --text:#e6edf1;
  --accent:#2ee6a8; --danger:#ff4d4d; --warn:#e6c02e; --muted:#7d8a92;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--text);
  font-family:'Segoe UI',system-ui,sans-serif;
}

/* Cabeceras */
h1{font-size:1.2rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0}
h1 span, h2 span{color:var(--accent)}
h2{margin:0 0 16px; font-size:1rem; color:var(--text)}

/* Botones y enlaces */
button, .btn{
  background:var(--panel); color:var(--text); border:1px solid var(--line);
  padding:9px 14px; border-radius:8px; cursor:pointer; font-size:.85rem; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px; font-family:inherit;
}
button:active, .btn:active{transform:scale(.97)}
.btn-accent{border-color:var(--accent); color:var(--accent)}
.btn-danger{border-color:var(--danger); color:var(--danger)}
.muted-link{color:var(--muted); font-size:.8rem; text-decoration:none}
.btn-warn-alert{
  border-color:var(--warn); color:var(--warn); font-weight:700;
  background:rgba(230,192,46,.12);
  animation:warn-pulse 1.6s infinite;
}
@keyframes warn-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(230,192,46,.45)}
  50%{box-shadow:0 0 0 6px rgba(230,192,46,0)}
}

/* Campos de formulario */
input, select, textarea{
  background:var(--panel2); color:var(--text); border:1px solid var(--line);
  border-radius:8px; padding:9px 12px; font-size:.9rem; width:100%; font-family:inherit;
}
.field{margin-bottom:12px}
.field label{display:block; font-size:.75rem; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em}
.error{color:var(--danger); font-size:.8rem; margin:-4px 0 12px; display:none}

/* Tabla de inventario */
table{width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden}
th,td{padding:10px 12px; text-align:left; font-size:.85rem; border-bottom:1px solid var(--line)}
th{color:var(--muted); font-weight:600; text-transform:uppercase; font-size:.7rem; letter-spacing:.05em}
tr:last-child td{border-bottom:none}
.cant{font-weight:700}
.cant.low{color:var(--danger)}
.row-actions{display:flex; gap:6px; flex-wrap:wrap}
.row-actions button{padding:6px 10px; font-size:.78rem}
.cat-tag{
  display:inline-block; padding:2px 8px; border-radius:20px; font-size:.72rem;
  background:rgba(46,230,168,.1); color:var(--accent); border:1px solid rgba(46,230,168,.25);
}
.empty{color:var(--muted); text-align:center; padding:40px 0; font-size:.9rem}

/* Modales */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:999;
  align-items:center; justify-content:center; padding:16px;
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  width:100%; max-width:420px; padding:20px; max-height:90vh; overflow-y:auto;
}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:16px}

/* Formularios centrados a pantalla completa (add_componente.php) */
.page-center{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px 16px;
}
.form-box{width:100%; max-width:380px}
.actions{display:flex; justify-content:flex-end; gap:8px; margin-top:8px}

/* Menú de botones grandes (menu.php) */
.menu-col{display:flex; flex-direction:column; align-items:center; gap:14px}
.menu-btn{
  width:90px; height:90px;
  background:var(--panel2); color:var(--text); border:1px solid var(--line);
  border-radius:16px; font-size:2rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  text-decoration:none;
}
.menu-btn:active{opacity:.7}
.menu-label{font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; text-align:center; margin-top:-8px}