:root {
    --navy-900: #0a1530;
    --navy-800: #12224a;
    --navy-700: #1c3563;
    --blue-400: #4f8fd6;
    --gold-500: #e0b23e;
    --gold-600: #c4952a;
    --gold-100: #fbeecb;
    --white: #ffffff;
    --gray-50: #f5f6f9;
    --gray-200: #e3e5ec;
    --gray-500: #7a7f93;
    --text-dark: #182238;
    --danger: #c0392b;
    --success: #1e824c;
    --radius: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--gray-50);
    color: var(--text-dark);
    line-height: 1.5;
}

a { color: var(--blue-400); text-decoration: none; }
a:hover { text-decoration: underline; }

.navbar {
    background: var(--navy-900);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
}
.navbar .brand { display: flex; align-items: center; gap: 10px; color: var(--white); font-size: 18px; font-weight: 600; }
.navbar .brand img { height: 40px; }
.navbar nav a { color: var(--gold-100); margin-left: 20px; font-size: 14px; }
.navbar nav a:hover { color: var(--gold-500); text-decoration: none; }

.hero {
    background: linear-gradient(180deg, var(--navy-900), var(--navy-700));
    color: var(--white);
    text-align: center;
    padding: 56px 20px;
}
.hero h1 { font-size: 28px; margin: 0 0 8px; }
.hero p { color: var(--gold-100); margin: 0 0 24px; }
.hero-search { display: flex; gap: 8px; max-width: 480px; margin: 0 auto; }
.hero-search input {
    flex: 1; height: 42px; border-radius: var(--radius); border: none; padding: 0 14px; font-size: 14px;
}
.hero-search button {
    background: var(--gold-500); border: none; border-radius: var(--radius); width: 46px; color: var(--navy-900); font-size: 18px; cursor: pointer;
}
.hero-search button:hover { background: var(--gold-600); }

.container { max-width: 1080px; margin: 0 auto; padding: 32px 20px; }

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

.card {
    background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden;
}
.card .foto { height: 150px; background: var(--gray-200); display: flex; align-items: center; justify-content: center; color: var(--gray-500); font-size: 13px; }
.card .foto img { width: 100%; height: 100%; object-fit: cover; }
.card .info { padding: 14px; }
.card .info h3 { margin: 0 0 4px; font-size: 15px; }
.card .info .precio { color: var(--gold-600); font-weight: 600; margin: 6px 0 0; }
.card .info .meta { color: var(--gray-500); font-size: 13px; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-disponible { background: #e4f6ec; color: var(--success); }
.badge-rentado { background: var(--gold-100); color: var(--gold-600); }
.badge-vencido, .badge-cancelado { background: #fbe6e3; color: var(--danger); }
.badge-pendiente { background: var(--gray-200); color: var(--gray-500); }
.badge-pagado { background: #e4f6ec; color: var(--success); }
.badge-activo { background: #e4f6ec; color: var(--success); }
.badge-finalizado { background: var(--gray-200); color: var(--gray-500); }
.badge-en_mantenimiento { background: #e8f1fb; color: var(--blue-400); }
.badge-vendido { background: var(--gray-200); color: var(--gray-500); }

.auth-box {
    max-width: 360px; margin: 60px auto; background: var(--white); border-radius: 12px; border: 1px solid var(--gray-200); padding: 28px;
}
.auth-box h2 { margin-top: 0; text-align: center; color: var(--navy-900); }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--gray-500); margin-bottom: 4px; }
.field input, .field select, .field textarea {
    width: 100%; height: 40px; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 0 12px; font-size: 14px;
}
.field textarea { height: auto; padding: 10px 12px; }

.btn {
    display: inline-block; background: var(--navy-900); color: var(--white); border: none; border-radius: var(--radius);
    padding: 10px 18px; font-size: 14px; cursor: pointer;
}
.btn:hover { background: var(--navy-700); text-decoration: none; }
.btn-gold { background: var(--gold-500); color: var(--navy-900); font-weight: 600; }
.btn-gold:hover { background: var(--gold-600); }
.btn-block { width: 100%; }

.error-msg { background: #fbe6e3; color: var(--danger); padding: 10px 14px; border-radius: var(--radius); font-size: 13px; margin-bottom: 14px; }

table.data { width: 100%; border-collapse: collapse; background: var(--white); border-radius: 12px; overflow: hidden; }
table.data th, table.data td { text-align: left; padding: 10px 14px; font-size: 14px; border-bottom: 1px solid var(--gray-200); }
table.data th { background: var(--gray-50); color: var(--gray-500); font-weight: 600; font-size: 12px; text-transform: uppercase; }

.page-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.page-title h1 { font-size: 20px; margin: 0; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; padding: 16px; }
.stat-card .num { font-size: 24px; font-weight: 600; color: var(--navy-900); }
.stat-card .label { font-size: 13px; color: var(--gray-500); }