:root {
  --bg: #F4F1EB; --card: #FFFFFF;
  --accent: #1A3A2A; --accent-mid: #2D5E3F; --accent-light: #E8F0EB;
  --gold: #B8963E; --gold-light: #F5EDD8; --gold-dark: #8A6F2E;
  --text: #1C1C1C; --text-secondary: #5A5A5A; --text-muted: #8A8A8A;
  --border: #E2DDD5; --border-light: #EDE9E2;
  --urgent: #C0392B; --urgent-bg: #FDF0EE; --urgent-border: #F5D5D0;
  --normal: #2471A3; --normal-bg: #EEF5FA;
  --conserva-bg: #FFF9EE; --conserva-border: #F0E0B8;
  --working: #D4820C; --working-bg: #FEF5E7; --working-border: #F0D8A8;
  --done: #1E8449; --done-bg: #EDF7F0;
  --book: #8A6F2E; --book-bg: #FBF6EA; --book-border: #E0CFA0;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.03);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.04);
  --radius: 12px; --radius-sm: 8px;
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh; min-height:100dvh;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}

/* ─── HEADER ─── */
.header {
  background:var(--accent); padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100;
  box-shadow:0 2px 12px rgba(0,0,0,0.15);
}
.header-left { display:flex; align-items:center; gap:14px; }
.hotel-crest {
  width:42px; height:42px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:22px; box-shadow:0 2px 6px rgba(184,150,62,0.3);
}
.header-text h1 { color:white; font-family:'Playfair Display',serif; font-size:20px; font-weight:600; line-height:1.2; }
.header-text span { color:var(--gold); font-size:12px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; }
.header-right { display:flex; align-items:center; gap:12px; }
.header-date { color:rgba(255,255,255,0.7); font-size:14px; font-weight:500; text-align:right; }
.user-btn {
  display:flex; align-items:center; gap:8px;
  background:var(--accent-mid); border:2px solid rgba(255,255,255,0.2);
  border-radius:24px; padding:6px 14px 6px 8px;
  color:white; font-size:14px; font-weight:600;
  cursor:pointer; font-family:'DM Sans',sans-serif; transition:var(--transition);
}
.user-btn:hover { border-color:var(--gold); }
.user-btn .user-dot { width:10px; height:10px; border-radius:50%; background:var(--gold); }

/* ─── USER PICKER ─── */
.user-picker-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  z-index:300; align-items:center; justify-content:center;
}
.user-picker-overlay.open { display:flex; }
.user-picker {
  background:white; border-radius:20px; padding:28px;
  width:90%; max-width:440px; box-shadow:var(--shadow-lg);
  animation:pickerIn 0.3s ease-out;
}
@keyframes pickerIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
.user-picker h2 { font-size:22px; font-weight:700; margin-bottom:6px; }
.user-picker p { font-size:16px; color:var(--text-muted); margin-bottom:20px; }
.user-list { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.user-option {
  padding:14px 16px; border:2px solid var(--border); border-radius:var(--radius-sm);
  text-align:center; cursor:pointer; transition:var(--transition);
  font-size:16px; font-weight:600; color:var(--text); background:white;
}
.user-option:hover { border-color:var(--accent); background:var(--accent-light); }
.user-option.active { border-color:var(--accent); background:var(--accent); color:white; }

/* ─── FILTERS ─── */
.filters {
  display:flex; gap:8px; padding:14px 24px;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  background:white; border-bottom:1px solid var(--border);
  position:sticky; top:74px; z-index:90;
}
.filters::-webkit-scrollbar { display:none; }
.filter-pill {
  padding:8px 18px; border-radius:24px; font-size:15px; font-weight:500;
  white-space:nowrap; cursor:pointer; transition:var(--transition);
  border:1.5px solid var(--border); background:white; color:var(--text-secondary);
}
.filter-pill:hover { border-color:var(--accent); color:var(--accent); }
.filter-pill.active { background:var(--accent); border-color:var(--accent); color:white; }
.filter-pill.filter-urgent.active { background:var(--urgent); border-color:var(--urgent); }
.filter-pill.filter-book.active { background:var(--gold-dark); border-color:var(--gold-dark); }
.filter-pill.filter-archive.active { background:var(--text-muted); border-color:var(--text-muted); }
.filter-pill .pill-count {
  display:inline-block; margin-left:5px;
  background:rgba(0,0,0,0.1); padding:2px 8px; border-radius:12px;
  font-size:13px; font-weight:700;
}
.filter-pill.active .pill-count { background:rgba(255,255,255,0.25); }

/* ─── CONTENT ─── */
.content { padding:12px 24px 40px; max-width:100%; }

.section-header { display:flex; align-items:center; justify-content:space-between; padding:18px 0 10px; }
.section-title { font-size:16px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.8px; }
.section-count { font-size:15px; color:var(--text-muted); font-weight:500; }

/* ─── NOTE CARD ─── */
.note-card {
  background:var(--card); border-radius:var(--radius);
  border:1.5px solid var(--border-light); margin-bottom:14px;
  box-shadow:var(--shadow-sm); transition:var(--transition);
  overflow:hidden; animation:cardIn 0.3s ease-out;
}
@keyframes cardIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.note-card:hover { box-shadow:var(--shadow); }

.note-card.status-open { border-left:5px solid var(--done); }
.note-card.status-working { border-left:5px solid var(--working); background:var(--working-bg); border-color:var(--working-border); }
.note-card.status-closed { border-left:5px solid #AAA; opacity:0.45; }
.note-card.status-closed .note-title { text-decoration:line-through; color:var(--text-muted); }
.note-card.priority-urgent { border-left:5px solid var(--urgent); border-color:var(--urgent-border); background:var(--urgent-bg); }
.note-card.priority-urgent.status-closed { border-left:5px solid #AAA; opacity:0.45; background:var(--card); border-color:var(--border-light); }
.note-card.is-conserva { border-color:var(--conserva-border); background:var(--conserva-bg); }
.note-card.is-book { border-color:var(--book-border); background:var(--book-bg); border-left:5px solid var(--gold); }

/* Card header */
.note-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px 8px; gap:10px; flex-wrap:wrap;
}
.note-author-line { display:flex; align-items:center; gap:8px; }
.avatar {
  width:32px; height:32px; border-radius:50%;
  background:var(--accent-light); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; flex-shrink:0;
}
.author-info .author-name { font-size:15px; font-weight:600; color:var(--text); }
.author-info .author-time { font-size:12px; color:var(--text-muted); font-weight:500; }

.seen-pills { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.seen-label { font-size:12px; color:var(--text-muted); font-weight:500; margin-right:2px; }
.seen-pill {
  display:inline-block; padding:2px 8px;
  background:var(--accent-light); color:var(--accent);
  border-radius:4px; font-size:11px; font-weight:600;
}
.btn-seen-inline {
  padding:2px 10px; border-radius:4px;
  background:var(--accent); color:white;
  border:none; cursor:pointer; font-size:11px; font-weight:600;
  font-family:'DM Sans',sans-serif; transition:var(--transition);
}
.btn-seen-inline:hover { background:var(--accent-mid); }

/* Tags */
.note-tags { display:flex; gap:6px; flex-wrap:wrap; padding:0 20px 6px; }
.tag {
  padding:3px 10px; border-radius:6px; font-size:12px;
  font-weight:700; letter-spacing:0.3px; text-transform:uppercase;
}
.tag-urgent { background:var(--urgent); color:white; }
.tag-status-open { background:var(--done); color:white; }
.tag-status-working { background:var(--working); color:white; }
.tag-status-closed { background:#AAA; color:white; }
.tag-conserva { background:var(--gold); color:white; }
.tag-book { background:var(--gold-dark); color:white; }

/* Title + Body */
.note-title { font-size:18px; font-weight:600; padding:6px 20px 4px; line-height:1.35; color:var(--text); }
.note-body { font-size:16px; line-height:1.6; color:var(--text-secondary); padding:0 20px 10px; }

/* ─── ATTACHMENTS ─── */
.attachments {
  display:flex; gap:8px; flex-wrap:wrap;
  padding:4px 20px 12px;
}

.attachment-thumb {
  width:80px; height:80px; border-radius:8px;
  object-fit:cover; border:1.5px solid var(--border);
  cursor:pointer; transition:var(--transition);
}
.attachment-thumb:hover { border-color:var(--accent); transform:scale(1.05); }

.attachment-file {
  display:flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:8px;
  background:var(--bg); border:1.5px solid var(--border);
  font-size:13px; font-weight:500; color:var(--text-secondary);
  cursor:pointer; transition:var(--transition); text-decoration:none;
}
.attachment-file:hover { border-color:var(--accent); background:var(--accent-light); }
.attachment-file .file-icon { font-size:16px; }
.attachment-file .file-name { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ─── THREAD UPDATES ─── */
.note-updates { border-top:1px dashed var(--border); margin:0 20px; padding:10px 0; }
.update-entry { display:flex; gap:8px; padding:6px 0; font-size:14px; line-height:1.5; }
.update-avatar {
  width:24px; height:24px; border-radius:50%;
  background:var(--accent-light); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; flex-shrink:0; margin-top:2px;
}
.update-content { flex:1; }
.update-meta { font-size:12px; color:var(--text-muted); font-weight:500; }
.update-meta strong { color:var(--text-secondary); font-weight:600; }
.update-text { color:var(--text-secondary); margin-top:2px; }

.update-attachments {
  display:flex; gap:6px; flex-wrap:wrap; margin-top:6px;
}
.update-attachments .attachment-thumb { width:60px; height:60px; }

/* ─── ADD UPDATE ─── */
.add-update {
  display:flex; gap:8px; padding:8px 20px 12px; align-items:flex-end;
}
.add-update-wrap { flex:1; display:flex; flex-direction:column; gap:6px; }
.add-update-input {
  width:100%; padding:8px 12px; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); font-family:'DM Sans',sans-serif;
  font-size:14px; color:var(--text); resize:none; min-height:36px; max-height:80px;
  transition:var(--transition);
}
.add-update-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.add-update-input::placeholder { color:var(--text-muted); }

.add-update-previews {
  display:flex; gap:6px; flex-wrap:wrap;
}
.preview-item {
  position:relative; width:48px; height:48px;
}
.preview-item img {
  width:48px; height:48px; border-radius:6px;
  object-fit:cover; border:1px solid var(--border);
}
.preview-item .file-badge {
  width:48px; height:48px; border-radius:6px;
  background:var(--bg); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
}
.preview-remove {
  position:absolute; top:-4px; right:-4px;
  width:18px; height:18px; border-radius:50%;
  background:var(--urgent); color:white; border:none;
  font-size:11px; cursor:pointer; display:flex;
  align-items:center; justify-content:center; line-height:1;
}

.add-update-actions { display:flex; gap:6px; }

.add-update-attach {
  padding:8px 12px; border-radius:var(--radius-sm);
  background:var(--bg); color:var(--text-muted); border:1.5px solid var(--border);
  font-size:16px; cursor:pointer; transition:var(--transition);
  display:flex; align-items:center; justify-content:center;
}
.add-update-attach:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }

.add-update-btn {
  padding:8px 14px; border-radius:var(--radius-sm);
  background:var(--accent); color:white; border:none;
  font-size:13px; font-weight:600; cursor:pointer;
  font-family:'DM Sans',sans-serif; transition:var(--transition);
  white-space:nowrap;
}
.add-update-btn:hover { background:var(--accent-mid); }

/* ─── STATUS BAR ─── */
.note-status-bar { display:flex; border-top:1px solid var(--border-light); }
.status-btn {
  flex:1; padding:10px; text-align:center;
  font-size:13px; font-weight:600; cursor:pointer;
  border:none; background:transparent; color:var(--text-muted);
  font-family:'DM Sans',sans-serif; transition:var(--transition);
  border-right:1px solid var(--border-light);
}
.status-btn:last-child { border-right:none; }
.status-btn:hover { background:var(--bg); }
.status-btn.active-open { background:var(--done-bg); color:var(--done); font-weight:700; }
.status-btn.active-working { background:var(--working-bg); color:var(--working); font-weight:700; }
.status-btn.active-closed { background:#F0F0F0; color:#888; font-weight:700; }

.note-bottom {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 20px 10px; font-size:13px; color:var(--text-muted);
}
.archive-info { font-size:12px; font-style:italic; }

/* ─── LIGHTBOX ─── */
.lightbox {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.85); z-index:400;
  align-items:center; justify-content:center;
  cursor:pointer;
}
.lightbox.open { display:flex; }
.lightbox img {
  max-width:92vw; max-height:92vh; border-radius:12px;
  box-shadow:0 8px 40px rgba(0,0,0,0.5);
}
.lightbox-close {
  position:absolute; top:16px; right:20px;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,0.15); border:none;
  color:white; font-size:22px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

/* ─── EMPTY / FAB / MODAL / FOOTER / TOAST ─── */
.empty-state { text-align:center; padding:60px 20px; color:var(--text-muted); }
.empty-state .empty-icon { font-size:48px; margin-bottom:14px; opacity:0.5; }
.empty-state p { font-size:17px; line-height:1.5; }

.fab {
  position:fixed; bottom:28px; right:28px;
  width:64px; height:64px; border-radius:18px;
  background:linear-gradient(135deg,var(--accent),var(--accent-mid));
  color:white; border:none; cursor:pointer;
  box-shadow:0 4px 16px rgba(26,58,42,0.35);
  display:flex; align-items:center; justify-content:center;
  font-size:30px; transition:var(--transition); z-index:80;
}
.fab:hover { transform:scale(1.06); box-shadow:0 6px 24px rgba(26,58,42,0.45); }
.fab:active { transform:scale(0.96); }

.modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.4); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  z-index:200; align-items:flex-end; justify-content:center;
}
.modal-overlay.open { display:flex; }
.modal {
  background:white; width:100%; max-width:600px; max-height:90vh;
  border-radius:20px 20px 0 0; overflow-y:auto;
  animation:modalSlide 0.3s ease-out;
}
@keyframes modalSlide { from{transform:translateY(100%)} to{transform:translateY(0)} }

.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px 16px; border-bottom:1px solid var(--border-light);
  position:sticky; top:0; background:white; z-index:10;
}
.modal-header h2 { font-size:20px; font-weight:700; }
.modal-close {
  width:36px; height:36px; border-radius:50%; background:var(--bg);
  border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--text-secondary); transition:var(--transition);
}
.modal-close:hover { background:var(--border); }

.modal-body { padding:20px 24px 28px; }
.form-group { margin-bottom:18px; }
.form-label {
  display:block; font-size:14px; font-weight:600;
  color:var(--text-secondary); margin-bottom:8px;
  text-transform:uppercase; letter-spacing:0.5px;
}
.form-input,.form-textarea {
  width:100%; padding:12px 16px; border:1.5px solid var(--border);
  border-radius:var(--radius-sm); font-family:'DM Sans',sans-serif;
  font-size:16px; color:var(--text); background:white; transition:var(--transition);
}
.form-input:focus,.form-textarea:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light);
}
.form-textarea { resize:vertical; min-height:120px; line-height:1.5; }

.priority-selector { display:flex; gap:10px; }
.priority-option {
  flex:1; padding:12px; border:2px solid var(--border);
  border-radius:var(--radius-sm); text-align:center;
  cursor:pointer; transition:var(--transition); background:white;
}
.priority-option:hover { border-color:var(--text-muted); }
.priority-option.selected-urgent { border-color:var(--urgent); background:var(--urgent-bg); }
.priority-option.selected-normal { border-color:var(--normal); background:var(--normal-bg); }
.priority-option .priority-dot { width:12px; height:12px; border-radius:50%; margin:0 auto 6px; }
.priority-option .priority-name { font-size:15px; font-weight:600; color:var(--text-secondary); }
.priority-option.selected-urgent .priority-name { color:var(--urgent); }
.priority-option.selected-normal .priority-name { color:var(--normal); }

/* Attachment button in modal */
.form-attach-area {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.form-attach-btn {
  display:flex; align-items:center; gap:6px;
  padding:10px 16px; border:2px dashed var(--border);
  border-radius:var(--radius-sm); background:white;
  cursor:pointer; transition:var(--transition);
  font-size:14px; font-weight:500; color:var(--text-muted);
  font-family:'DM Sans',sans-serif;
}
.form-attach-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
.form-attach-previews { display:flex; gap:6px; flex-wrap:wrap; }
.form-preview {
  position:relative; width:56px; height:56px;
}
.form-preview img {
  width:56px; height:56px; border-radius:8px;
  object-fit:cover; border:1px solid var(--border);
}
.form-preview .file-badge {
  width:56px; height:56px; border-radius:8px;
  background:var(--bg); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
}
.form-preview-remove {
  position:absolute; top:-4px; right:-4px;
  width:18px; height:18px; border-radius:50%;
  background:var(--urgent); color:white; border:none;
  font-size:11px; cursor:pointer; display:flex;
  align-items:center; justify-content:center;
}

.checkbox-row { display:flex; align-items:center; gap:12px; padding:10px 0; }
.checkbox-row input[type="checkbox"] { width:20px; height:20px; accent-color:var(--gold); cursor:pointer; }
.checkbox-row label { font-size:15px; color:var(--text-secondary); cursor:pointer; font-weight:500; }
.checkbox-row.book-row label { color:var(--book); font-weight:600; }
.checkbox-row.book-row input[type="checkbox"] { accent-color:var(--book); }

.modal-submit {
  width:100%; padding:16px;
  background:linear-gradient(135deg,var(--accent),var(--accent-mid));
  color:white; border:none; border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif; font-size:17px; font-weight:600;
  cursor:pointer; transition:var(--transition); margin-top:10px;
}
.modal-submit:hover { box-shadow:0 4px 16px rgba(26,58,42,0.3); }
.modal-submit:active { transform:scale(0.98); }

.app-footer { text-align:center; padding:32px 20px 20px; font-size:12px; color:var(--text-muted); }
.app-footer .footer-brand { font-weight:600; color:var(--text-secondary); }
.app-footer .footer-version { margin-top:2px; font-size:11px; opacity:0.7; }

@media (min-width:768px) {
  .header { padding:16px 40px; }
  .filters { padding:14px 40px; }
  .content { padding:16px 40px 40px; }
  .modal { border-radius:20px; margin:auto; max-height:85vh; }
  .modal-overlay { align-items:center; }
  @keyframes modalSlide { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
}
@media (max-width:400px) {
  .note-title { font-size:16px; }
  .note-body { font-size:14px; }
  .header-date { display:none; }
  .user-btn span { display:none; }
  .status-btn { font-size:12px; padding:8px 4px; }
}

.toast {
  position:fixed; bottom:100px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--accent); color:white; padding:12px 24px;
  border-radius:12px; font-size:15px; font-weight:500;
  box-shadow:var(--shadow-lg); opacity:0;
  transition:all 0.3s ease; z-index:300; pointer-events:none;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ─── LOGIN SCREEN ─── */
#loginScreen {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-mid) 100%);
}
.login-container {
  background:white; border-radius:20px; padding:40px 32px;
  width:90%; max-width:380px; box-shadow:var(--shadow-lg); text-align:center;
}
.login-crest { font-size:48px; margin-bottom:12px; }
.login-title { font-family:'Playfair Display',serif; font-size:28px; font-weight:700; color:var(--accent); }
.login-subtitle { font-size:14px; color:var(--text-muted); margin-bottom:28px; }
.login-container .form-group { margin-bottom:14px; text-align:left; }
.login-container .form-input { text-align:left; }
.login-error {
  background:var(--urgent-bg); border:1px solid var(--urgent-border);
  color:var(--urgent); padding:10px 14px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:500; margin-bottom:14px;
}
.login-btn {
  width:100%; padding:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent-mid));
  color:white; border:none; border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif; font-size:16px; font-weight:600;
  cursor:pointer; transition:var(--transition);
}
.login-btn:hover { box-shadow:0 4px 16px rgba(26,58,42,0.3); }
.login-btn:disabled { opacity:0.6; cursor:not-allowed; }

/* ─── USER MENU ─── */
.user-menu {
  position:fixed; top:74px; right:24px;
  background:white; border-radius:var(--radius); border:1px solid var(--border);
  box-shadow:var(--shadow-lg); min-width:200px; z-index:110;
  padding:12px 0; animation:pickerIn 0.2s ease-out;
}
.user-menu-name { padding:8px 20px 2px; font-weight:600; font-size:15px; }
.user-menu-role { padding:0 20px 8px; font-size:13px; color:var(--text-muted); }
.user-menu hr { border:none; border-top:1px solid var(--border-light); margin:4px 0; }
.user-menu-item {
  display:block; padding:10px 20px; font-size:14px; color:var(--text-secondary);
  cursor:pointer; transition:var(--transition); text-decoration:none;
}
.user-menu-item:hover { background:var(--bg); color:var(--text); }