* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, sans-serif;
    background: #faf7f2;
    color: #333;
}

.hidden { display: none !important; }

/* Login page */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.login-form {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 280px;
}
.login-form .error { color: #b00020; margin: 0; }
.login-form input { padding: 0.5rem; font-size: 1rem; }
.login-form button { padding: 0.6rem; font-size: 1rem; cursor: pointer; }

/* Header */
#app-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid #e5ddd0;
    position: sticky;
    top: 0;
    z-index: 10;
}
#app-header h1 { font-size: 1.2rem; margin: 0; }
#summary { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.9rem; color: #555; }
#logout-link { margin-left: auto; color: #b9850f; text-decoration: none; }

/* Toolbar */
#toolbar {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem 0;
}
#toolbar button {
    padding: 0.5rem 1rem;
    border: 1px solid #b9850f;
    background: #fff;
    color: #b9850f;
    border-radius: 6px;
    cursor: pointer;
}
#toolbar button:hover { background: #b9850f; color: #fff; }

/* Import panel */
#import-panel {
    margin: 1rem 1.5rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid #e5ddd0;
    border-radius: 8px;
}
#import-textarea { width: 100%; font-family: monospace; }
#import-result { margin-top: 0.75rem; white-space: pre-line; font-size: 0.9rem; }

/* Main layout */
#app-main {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
}
@media (max-width: 800px) {
    #app-main { grid-template-columns: 1fr; }
}

#pool-panel, #tables-panel { background: #fff; border: 1px solid #e5ddd0; border-radius: 8px; padding: 1rem; }
#pool-search { width: 100%; padding: 0.4rem; margin-bottom: 0.75rem; }

.guest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; min-height: 40px; }

.guest-card {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: #faf7f2;
    border: 1px solid #e5ddd0;
    border-radius: 6px;
    cursor: grab;
    font-size: 0.9rem;
}
.guest-name { flex: 1; }
.badge { font-size: 0.7rem; font-weight: bold; padding: 0.1rem 0.4rem; border-radius: 4px; }
.badge-adulto { background: #d9ecff; color: #1a5aa6; }
.badge-nino { background: #ffe6c7; color: #a65c00; }
.group-tag { font-size: 0.7rem; background: #eee; padding: 0.1rem 0.4rem; border-radius: 4px; color: #555; }
.allergy-icon { color: #b00020; cursor: help; }

/* Tables grid */
#tables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.table-card {
    border: 1px solid #e5ddd0;
    border-radius: 8px;
    padding: 0.75rem;
    background: #faf7f2;
}
.table-card.table-full { border-color: #b00020; }
.table-card header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
.table-name { flex: 1; font-weight: bold; }
.table-occupancy { font-size: 0.8rem; color: #555; }
.rename-btn, .delete-btn { border: none; background: none; cursor: pointer; font-size: 0.9rem; }
.delete-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.table-guest-list { min-height: 60px; background: #fff; border-radius: 6px; padding: 0.4rem; }

/* Guest edit dialog */
#guest-edit-dialog { border: none; border-radius: 8px; padding: 1.5rem; width: 320px; }
#guest-edit-dialog::backdrop { background: rgba(0,0,0,0.4); }
#guest-edit-form { display: flex; flex-direction: column; gap: 0.5rem; }
#guest-edit-form label { font-size: 0.85rem; font-weight: bold; }
#guest-edit-form input, #guest-edit-form select { padding: 0.4rem; }
#guest-edit-form div { display: flex; gap: 0.5rem; margin-top: 0.5rem; }