:root {
  --navy: #1f3b4d;
  --gold: #9c7a3c;
  --bg: #f6f4f0;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--bg); color: #222; }

.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card { background: #fff; padding: 2.5rem; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.1); width: 320px; }
.login-card h1 { color: var(--navy); margin: 0 0 .25rem; font-size: 1.4rem; }
.login-card .subtitle { color: #777; margin: 0 0 1.5rem; font-size: .9rem; }
.login-card label { display: block; font-size: .85rem; margin: .75rem 0 .25rem; }
.login-card input[type=email], .login-card input[type=password] {
  width: 100%; padding: .6rem; border: 1px solid #ccc; border-radius: 6px;
}
.login-card button {
  margin-top: 1.25rem; width: 100%; padding: .7rem; background: var(--navy); color: #fff;
  border: none; border-radius: 6px; font-weight: 600; cursor: pointer;
}
.login-card .error { background: #fdeaea; color: #a12b2b; padding: .5rem .75rem; border-radius: 6px; font-size: .85rem; }

.topbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: var(--navy); color: #fff; }
.topbar h1 { font-size: 1.1rem; margin: 0; }
.user-box a { color: #fff; margin-left: 1rem; }

.filters { display: flex; gap: .5rem; flex-wrap: wrap; padding: 1rem 2rem; background: #fff; border-bottom: 1px solid #ddd; }
.filters input, .filters select { padding: .5rem; border: 1px solid #ccc; border-radius: 6px; }
.filters button { padding: .5rem 1rem; background: var(--gold); color: #fff; border: none; border-radius: 6px; cursor: pointer; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; padding: 1.5rem 2rem; }
.card { display: block; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.08); text-decoration: none; color: inherit; }
.card img { width: 100%; height: 150px; object-fit: cover; display: block; background: #eee; }
.card-body { padding: .6rem .75rem; }
.card-body strong { display: block; color: var(--navy); font-size: .85rem; }
.card-body span { display: block; color: #888; font-size: .75rem; margin: .1rem 0 .3rem; }
.card-body p { margin: 0; font-size: .8rem; color: #444; }

.pagination { text-align: center; padding: 1rem; color: #666; font-size: .85rem; }
.empty { padding: 2rem; text-align: center; color: #888; }

.card-body .tags { font-size: .72rem; color: var(--gold); margin: .2rem 0; }
.edited-badge { font-size: .7rem; color: #888; font-style: normal; }
.wm-choice { display: block; font-size: .7rem; color: #666; margin: .3rem 0 0; }
.wm-choice input { vertical-align: middle; margin-right: .3rem; }

.card-actions { display: flex; gap: .4rem; margin-top: .5rem; }
.card-actions button, .card-actions a {
  flex: 1; padding: .35rem; font-size: .75rem; border: 1px solid #ccc; border-radius: 5px;
  background: #f4f4f4; cursor: pointer; text-align: center; text-decoration: none; color: inherit;
}
.btn-download:hover { background: var(--gold); color: #fff; }
.btn-edit:hover { background: var(--navy); color: #fff; }
.btn-delete { color: #a12b2b; border-color: #e3b8b8; }
.btn-delete:hover { background: #a12b2b; color: #fff; }

.edit-form { margin-top: .6rem; border-top: 1px dashed #ddd; padding-top: .6rem; }
.edit-form label { display: block; font-size: .72rem; color: #666; margin-top: .4rem; }
.edit-form select, .edit-form textarea, .edit-form input[type=text] {
  width: 100%; padding: .35rem; border: 1px solid #ccc; border-radius: 5px; font-size: .78rem;
}
.edit-form-buttons { display: flex; gap: .4rem; margin-top: .5rem; }
.edit-form-buttons button { flex: 1; padding: .4rem; border-radius: 5px; border: none; cursor: pointer; font-size: .78rem; }
.btn-guardar { background: var(--navy); color: #fff; }
.btn-cancelar { background: #eee; }

.login-logo { display: block; max-width: 150px; height: auto; margin: 0 auto 0.75rem; }
.topbar h1 { display: flex; align-items: center; gap: 0.6rem; }
.topbar-logo { height: 40px; width: auto; display: block; vertical-align: middle; }