* { box-sizing: border-box; }
body { margin:0; font-family: Arial, sans-serif; background:#f4f4f4; }
a { text-decoration:none; color:#333; }
a:hover { text-decoration:underline; }

.topbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 20px;
    background:#222;
    color:white;
}
.logo { font-weight:bold; }
.nav a { margin-right:15px; color:white; }
.user-cart a { margin-left:10px; color:white; }
.user-name { margin-left:10px; }

.container {
    width:90%;
    max-width:1100px;
    margin:20px auto;
    background:white;
    padding:20px;
    border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

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

.card {
    border:1px solid #ddd;
    border-radius:8px;
    overflow:hidden;
    background:#fafafa;
    display:flex;
    flex-direction:column;
}
.card img {
    width:100%;
    height:160px;
    object-fit:cover;
}
.card-body { padding:10px 15px; flex:1; display:flex; flex-direction:column; }
.card-title { font-size:1.1rem; font-weight:bold; margin-bottom:5px; }
.card-text { font-size:0.9rem; flex:1; }
.card-price { font-weight:bold; margin-top:8px; }

.btn {
    display:inline-block;
    padding:8px 14px;
    border:none;
    border-radius:4px;
    background:#222;
    color:white;
    cursor:pointer;
    font-size:0.9rem;
}
.btn:hover { background:#444; }
.btn-danger { background:#b00020; }
.btn-danger:hover { background:#d00025; }
.btn-link { background:none; border:none; color:#0066cc; padding:0; cursor:pointer; }

.table {
    width:100%;
    border-collapse:collapse;
}
.table th, .table td {
    border:1px solid #ddd;
    padding:8px;
}
.table th {
    background:#eee;
}

.footer {
    margin-top:20px;
    padding:10px 20px;
    text-align:center;
    background:#222;
    color:white;
}

/* Formularios */
form input[type=text],
form input[type=email],
form input[type=password],
form textarea {
    width:100%;
    padding:8px;
    margin-bottom:10px;
    border-radius:4px;
    border:1px solid #ccc;
}

form textarea { min-height:80px; }

h1,h2,h3 { margin-top:0; }

/* Acordeón con estilo de tarjeta */
.accordion {
    margin: 20px 0;
}

.accordion summary {
    background: #222;
    color: white;
    padding: 12px 16px;
    font-size: 1.1rem;
    border-radius: 6px;
    cursor: pointer;
    list-style: none;
}

.accordion summary:hover {
    background: #444;
}

.accordion summary::-webkit-details-marker {
    display: none;
}

.accordion .content {
    background: #fafafa;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 0 0 6px 6px;
    margin-top: -5px;
}

/* grid dentro de acordeón */
.accordion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
    gap: 20px;
}