*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial;
}

body{
  background:#f3f6fb;
}

.layout{
  display:flex;
  min-height:100vh;
}

.sidebar{
  width:260px;
  background:#003bb3;
  color:white;
  padding:25px;
}

.sidebar h1{
  font-size:28px;
  margin-bottom:5px;
}

.sidebar p{
  opacity:.8;
  margin-bottom:30px;
}

.sidebar ul{
  list-style:none;
}

.sidebar li{
  padding:14px;
  border-radius:10px;
  cursor:pointer;
  margin-bottom:8px;
  transition:.2s;
}

.sidebar li:hover{
  background:rgba(255,255,255,.15);
}

.menu-title{
  margin-top:20px;
  font-weight:bold;
  opacity:.7;
}
.menu-title {

  color: #ffd54f;
  font-size: 18px;
  font-weight: bold;

  text-transform: uppercase;

  margin-top: 25px;
  margin-bottom: 10px;

  letter-spacing: 1px;

  border-left: 4px solid #ffd54f;

  padding-left: 10px;

}

.content{
  flex:1;
  padding:30px;
}

.topbar{
  margin-bottom:25px;
}

.card{
  background:white;
  border-radius:18px;
  padding:25px;
  margin-bottom:25px;
  box-shadow:0 3px 15px rgba(0,0,0,.06);
}

.card h3{
  margin-bottom:20px;
  color:#003bb3;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:15px;
}

input{
  padding:14px;
  border:1px solid #dcdcdc;
  border-radius:10px;
  outline:none;
}

.btn{
  background:#0057ff;
  color:white;
  border:none;
  border-radius:10px;
  padding:14px;
  cursor:pointer;
  font-weight:bold;
}

.btn:hover{
  opacity:.9;
}

.verde{
  background:#0e9f43;
}

.subtitulo{
  margin:25px 0 15px;
}

table{
  width:100%;
  border-collapse:collapse;
  margin-top:20px;
}

table th{
  background:#f5f7fb;
  padding:14px;
  text-align:left;
}

table td{
  padding:14px;
  border-bottom:1px solid #eee;
}

.btn-delete{
  background:#ff4d4d;
  color:white;
  border:none;
  width:32px;
  height:32px;
  border-radius:8px;
  cursor:pointer;
}

.total-box{
  margin-top:20px;
  font-size:22px;
  font-weight:bold;
  color:#0e9f43;
}

.upload-box{
  display:flex;
  gap:15px;
  align-items:center;
  flex-wrap:wrap;
}

body {
  font-size: 13px;
}

.layout {
  height: 100vh;
  overflow: hidden;
}

.content {
  padding: 10px;
  overflow-y: auto;
}

.card {
  padding: 10px;
  margin-bottom: 10px;
}

h1 {
  font-size: 20px;
}

h2 {
  font-size: 18px;
  margin-bottom: 8px;
}

h3 {
  font-size: 15px;
  margin-bottom: 6px;
}

h4 {
  font-size: 13px;
}

input,
select,
textarea,
button {
  font-size: 12px;
  padding: 6px;
}

table {
  font-size: 12px;
}

table th,
table td {
  padding: 6px;
}

.btn {
  padding: 6px 10px;
  font-size: 12px;
}

.sidebar {
  width: 210px;
}

.sidebar li {
  padding: 8px;
  font-size: 13px;
}

.topbar {
  margin-bottom: 10px;
}

.grid {
  gap: 8px;
}

.total-box {
  font-size: 15px;
  padding: 8px;
}

.upload-box {
  padding: 8px;
}