:root {
--bg: #0d0d0d;
--bg-secondary: #151515;
--bg-hover: #1e1e1e;
--border: #2b2b2b;

```
--text: #e6e6e6;
--text-muted: #8c8c8c;

--primary: #2a2a2a;
--danger: #8f5656;
--success: #567d61;
```

}

* {
  box-sizing: border-box;
  }

body {
margin: 0;
min-height: 100vh;

```
background: var(--bg);
color: var(--text);

font-family:
    Arial,
    Helvetica,
    sans-serif;
```

}

button,
input {
font: inherit;
}

button {
cursor: pointer;
}

.container {
width: min(1200px, calc(100% - 32px));
margin: 0 auto;
padding: 35px 0;
}

/* =========================
HEADER
========================= */

.header {
display: flex;
justify-content: space-between;
align-items: center;

```
gap: 20px;
margin-bottom: 28px;
```

}

.header h1 {
margin: 0;

```
font-size: 28px;
font-weight: 500;
```

}

.header p {
margin: 7px 0 0;

```
color: var(--text-muted);
font-size: 14px;
```

}

/* =========================
TOOLBAR
========================= */

.toolbar {
display: flex;
gap: 10px;

```
margin-bottom: 20px;
```

}

.toolbar input {
flex: 1;
}

/* =========================
INPUTS
========================= */

input {
width: 100%;

```
padding: 11px 13px;

background: var(--bg-secondary);
color: var(--text);

border: 1px solid var(--border);
border-radius: 7px;

outline: none;
```

}

input:focus {
border-color: #555;
}

/* =========================
BOTONES
========================= */

.btn {
padding: 10px 15px;

```
background: var(--primary);
color: var(--text);

border: 1px solid var(--border);
border-radius: 7px;

transition:
    background 0.2s,
    transform 0.15s;
```

}

.btn:hover {
background: #353535;
}

.btn:active {
transform: scale(0.98);
}

.btn-primary {
background: #303030;
}

.btn-danger {
color: #d18a8a;
}

.btn-success {
color: #9ac7a5;
}

/* =========================
TABLA
========================= */

.table-wrapper {
overflow-x: auto;

```
background: var(--bg-secondary);

border: 1px solid var(--border);
border-radius: 10px;
```

}

table {
width: 100%;
min-width: 800px;

```
border-collapse: collapse;
```

}

th,
td {
padding: 15px;

```
text-align: left;

border-bottom:
    1px solid var(--border);
```

}

th {
color: var(--text-muted);

```
font-size: 12px;
font-weight: 500;

text-transform: uppercase;
```

}

td {
font-size: 14px;
}

tbody tr:last-child td {
border-bottom: none;
}

.empty {
padding: 45px;

```
text-align: center;

color: var(--text-muted);
```

}

.actions {
display: flex;
gap: 7px;
}

.btn-small {
padding: 7px 10px;

```
background: #1d1d1d;
color: var(--text-muted);

border: 1px solid var(--border);
border-radius: 6px;
```

}

.btn-small:hover {
background: #2b2b2b;
color: var(--text);
}

.out-of-stock {
color: #c87b7b;
}

/* =========================
PAPELERA
========================= */

.trash-info {
margin-bottom: 18px;

```
color: var(--text-muted);
font-size: 14px;
```

}

/* =========================
MODAL
========================= */

.modal {
position: fixed;
inset: 0;

```
display: flex;
align-items: center;
justify-content: center;

padding: 20px;

background: rgba(0, 0, 0, 0.75);

z-index: 1000;
```

}

.modal-box {
width: min(500px, 100%);

```
padding: 22px;

background: #171717;

border: 1px solid var(--border);
border-radius: 12px;
```

}

.modal-header {
display: flex;
justify-content: space-between;
align-items: center;

```
margin-bottom: 20px;
```

}

.modal-header h2 {
margin: 0;

```
font-size: 20px;
font-weight: 500;
```

}

.close-btn {
width: 32px;
height: 32px;

```
background: transparent;
color: var(--text-muted);

border: none;

font-size: 27px;
```

}

.close-btn:hover {
color: var(--text);
}

.form-group {
margin-bottom: 17px;
}

label {
display: block;

```
margin-bottom: 7px;

color: var(--text-muted);
font-size: 13px;
```

}

.form-row {
display: grid;
grid-template-columns: 1fr 1fr;

```
gap: 12px;
```

}

.modal-actions {
display: flex;
justify-content: flex-end;

```
gap: 10px;

margin-top: 24px;
```

}

/* =========================
NOTIFICACIÓN
========================= */

.notification {
position: fixed;

```
right: 20px;
bottom: 20px;

max-width: 350px;

padding: 13px 16px;

background: #222;
color: var(--text);

border: 1px solid var(--border);
border-radius: 8px;

opacity: 0;

transform: translateY(20px);

pointer-events: none;

transition:
    opacity 0.25s,
    transform 0.25s;
```

}

.notification.show {
opacity: 1;

```
transform: translateY(0);
```

}

/* =========================
UTILIDADES
========================= */

.hidden {
display: none !important;
}

/* =========================
RESPONSIVE
========================= */

@media (max-width: 700px) {

```
.header {
    flex-direction: column;
    align-items: flex-start;
}

.toolbar {
    flex-wrap: wrap;
}

.toolbar input {
    width: 100%;
    flex-basis: 100%;
}

.form-row {
    grid-template-columns: 1fr;
}
```

}