/* ============================================================
   ALOJAMIX · CSS v1.3 — con responsive móvil
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #f4f2ee;
  --surface:  #ffffff;
  --surface2: #eeebe6;
  --border:   #e0dbd3;
  --border2:  #c9c4bc;
  --text:     #1a1916;
  --text2:    #64605a;
  --text3:    #9c9890;
  --accent:   #1a472a;
  --accent-l: #e8f0eb;
  --accent-m: #4a8c5c;
  --danger:   #c0392b;
  --danger-l: #fdf0ef;
  --warn:     #d68000;
  --warn-l:   #fef6e4;
  --info:     #1a5fa8;
  --info-l:   #e8f0fb;
  --radius:   10px;
  --radius-sm:6px;
  --shadow:   0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.05);
}

body { font-family:'DM Sans',system-ui,sans-serif; background:var(--bg); color:var(--text); font-size:13px; line-height:1.5; }

/* ── LOGIN ── */
.login-screen { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:16px; }
.login-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:32px 36px; width:100%; max-width:400px; box-shadow:0 4px 24px rgba(0,0,0,.08); }
.login-logo { font-size:20px; font-weight:600; color:var(--accent); display:flex; align-items:center; gap:8px; margin-bottom:24px; }
.login-title { font-size:20px; font-weight:600; margin-bottom:4px; }
.login-sub { font-size:13px; color:var(--text3); margin-bottom:24px; }
.login-switch { text-align:center; margin-top:16px; font-size:12px; color:var(--text3); }
.login-switch a { color:var(--accent); text-decoration:none; }

/* ── APP LAYOUT ── */
.app { display:flex; height:100vh; overflow:hidden; position:relative; }

/* ── SIDEBAR BACKDROP (móvil) ── */
.sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:49; }

/* ── SIDEBAR ── */
.sidebar {
  width:220px; min-width:220px;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; z-index:50;
  transition:transform .25s ease;
}
.sidebar-logo { padding:18px 18px 14px; font-size:17px; font-weight:600; letter-spacing:-.4px; color:var(--accent); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.logo-mark { width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; flex-shrink:0; }
.sidebar-nav { padding:14px 10px 6px; }
.sidebar-label { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); font-weight:500; padding:0 8px 6px; display:flex; align-items:center; justify-content:space-between; }
.nav-item { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--radius-sm); cursor:pointer; color:var(--text2); font-size:13px; transition:all .12s; user-select:none; }
.nav-item:hover { background:var(--surface2); color:var(--text); }
.nav-item.active { background:var(--accent-l); color:var(--accent); font-weight:500; }
.sidebar-properties { padding:10px; flex:1; overflow-y:auto; }
.property-item { padding:9px 10px; border-radius:var(--radius-sm); cursor:pointer; margin-bottom:2px; transition:all .12s; user-select:none; }
.property-item:hover { background:var(--surface2); }
.property-item.active { background:var(--accent-l); }
.prop-name { font-weight:500; font-size:13px; }
.prop-sub { font-size:11px; color:var(--text3); margin-top:1px; }
.sidebar-footer { padding:12px 14px; border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.user-info { flex:1; display:flex; align-items:center; gap:9px; min-width:0; }
.user-avatar { width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.user-name { font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { font-size:10px; color:var(--text3); }

/* ── MAIN ── */
.main-content { flex:1; overflow-y:auto; display:flex; flex-direction:column; min-width:0; }
.topbar { background:var(--surface); border-bottom:1px solid var(--border); padding:12px 20px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:20; gap:10px; }
.topbar-title { font-size:15px; font-weight:600; letter-spacing:-.3px; }
.topbar-sub { font-size:11px; color:var(--text3); margin-top:1px; }
.topbar-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }

/* Hamburger — oculto en desktop */
.hamburger { display:none !important; }

/* ── STATS BAR ── */
.stats-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:16px 20px 0; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; box-shadow:var(--shadow); }
.stat-label { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:.05em; font-weight:500; }
.stat-value { font-size:22px; font-weight:600; letter-spacing:-1px; margin:4px 0 2px; }
.stat-note { font-size:11px; color:var(--text3); }
.stat-value.green { color:var(--accent); }

/* ── VIEW ── */
.view-content { padding:16px 20px; flex:1; }
.view { display:none; }
.view.active { display:block; }

/* ── CARDS ── */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:16px; }
.card-header { padding:12px 16px 10px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.card-title { font-size:13px; font-weight:600; }
.card-body { padding:14px 16px; }

/* ── LEGEND ── */
.legend-row { font-size:11px; color:var(--text3); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.legend-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; }

/* ── ROOMS ── */
.rooms-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
.room-card { border:1px solid var(--border); border-radius:var(--radius-sm); padding:11px 13px; cursor:pointer; transition:all .12s; background:var(--surface); }
.room-card:hover { border-color:var(--border2); box-shadow:0 2px 8px rgba(0,0,0,.07); transform:translateY(-1px); }
.room-card.occupied { border-left:3px solid var(--danger); }
.room-card.free { border-left:3px solid var(--accent-m); }
.room-card.pending { border-left:3px solid var(--warn); }
.room-num { font-size:20px; font-weight:700; letter-spacing:-.5px; font-family:'DM Mono',monospace; }
.room-type { font-size:11px; color:var(--text2); margin:2px 0 6px; }
.room-guest { font-size:11px; color:var(--text2); margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.room-guest.free { color:var(--accent-m); }
.room-checknote { font-size:10px; color:var(--warn); margin-top:3px; }
.room-dates { font-size:10px; font-family:'DM Mono',monospace; color:var(--text3); margin-top:3px; }

/* ── BADGES ── */
.badge { display:inline-block; font-size:10px; font-weight:500; padding:2px 7px; border-radius:20px; }
.badge-occupied { background:var(--danger-l); color:var(--danger); }
.badge-free     { background:var(--accent-l); color:var(--accent); }
.badge-pending  { background:var(--warn-l);   color:var(--warn); }
.badge-booking  { background:#dbeafe; color:#1e40af; }
.badge-airbnb   { background:#fce7f3; color:#9d174d; }
.badge-vrbo     { background:#fef6e4; color:#92400e; }
.badge-manual   { background:var(--accent-l); color:var(--accent); }
.badge-other    { background:var(--surface2); color:var(--text2); }

/* ── CALENDAR ── */
.cal-grid { display:grid; }
.cal-label { padding:7px 10px 7px 0; font-size:11px; color:var(--text2); font-weight:500; display:flex; align-items:center; border-bottom:1px solid var(--border); white-space:nowrap; }
.cal-head { padding:5px 0; text-align:center; font-size:10px; color:var(--text3); font-weight:500; border-bottom:1px solid var(--border); }
.cal-head.today { color:var(--accent); font-weight:700; }
.cal-cell { border-left:1px solid var(--border); border-bottom:1px solid var(--border); height:32px; position:relative; cursor:pointer; }
.cal-cell:hover { background:var(--surface2); }
.cal-today-cell { background:rgba(26,71,42,.04); }
.cal-today-line { position:absolute; top:0; bottom:0; width:2px; background:var(--accent); left:0; z-index:5; }
.cal-block { position:absolute; inset:2px 0; border-radius:3px; display:flex; align-items:center; padding:0 5px; font-size:10px; font-weight:500; white-space:nowrap; overflow:hidden; z-index:2; cursor:default; }

/* ── GUESTS ── */
.guest-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.guest-row:last-child { border-bottom:none; }
.guest-avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; flex-shrink:0; }
.guest-name { font-weight:500; font-size:13px; }
.guest-detail { font-size:11px; color:var(--text3); }
.guest-room { font-size:10px; font-weight:600; font-family:'DM Mono',monospace; background:var(--surface2); color:var(--text2); padding:2px 8px; border-radius:4px; flex-shrink:0; }

/* ── iCAL ── */
.ical-layout { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ical-row { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.ical-row:last-child { border-bottom:none; }
.ical-platform-icon { width:30px; height:30px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; margin-top:2px; }
.ical-url { font-size:10px; color:var(--text3); font-family:'DM Mono',monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.sync-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.sync-ok    { background:var(--accent-m); }
.sync-warn  { background:var(--warn); }
.sync-err   { background:var(--danger); }
.sync-never { background:var(--text3); }
.ical-export-url { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 12px; font-family:'DM Mono',monospace; font-size:11px; color:var(--text2); word-break:break-all; margin-bottom:10px; }

/* ── FORMS ── */
.form-row { margin-bottom:14px; }
.form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-label { display:block; font-size:11px; font-weight:500; color:var(--text2); margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em; }
.form-input { width:100%; padding:8px 11px; border-radius:var(--radius-sm); border:1px solid var(--border2); background:var(--bg); font-family:inherit; font-size:13px; color:var(--text); outline:none; transition:border-color .12s; }
.form-input:focus { border-color:var(--accent); background:#fff; }
select.form-input { cursor:pointer; }
textarea.form-input { resize:vertical; }

/* ── BUTTONS ── */
.btn { padding:7px 14px; border-radius:var(--radius-sm); font-size:12px; font-weight:500; cursor:pointer; font-family:inherit; transition:all .12s; border:1px solid transparent; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover { background:#153d24; }
.btn-danger { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-danger:hover { background:#a93226; }
.btn-ghost { background:transparent; color:var(--text2); border-color:var(--border2); }
.btn-ghost:hover { background:var(--surface2); }
.btn-sm { padding:5px 10px; font-size:11px; }
.btn-full { width:100%; justify-content:center; padding:10px; font-size:14px; }
.btn-icon { background:transparent; border:none; cursor:pointer; color:var(--text3); padding:4px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:16px; line-height:1; transition:all .12s; }
.btn-icon:hover { color:var(--text); background:var(--surface2); }

/* ── MODAL ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index:100; opacity:0; pointer-events:none; transition:opacity .15s; padding:16px; }
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal { background:var(--surface); border-radius:var(--radius); width:100%; max-width:460px; box-shadow:0 20px 60px rgba(0,0,0,.18); transform:translateY(10px); transition:transform .15s; max-height:90vh; display:flex; flex-direction:column; }
.modal-overlay.open .modal { transform:translateY(0); }
.modal-header { padding:14px 18px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.modal-title { font-size:15px; font-weight:600; }
.modal-close { cursor:pointer; color:var(--text3); font-size:20px; line-height:1; background:none; border:none; padding:2px 6px; border-radius:4px; }
.modal-close:hover { background:var(--surface2); }
.modal-body { padding:16px 18px; overflow-y:auto; flex:1; }
.modal-footer { padding:10px 18px 14px; display:flex; gap:8px; justify-content:flex-end; border-top:1px solid var(--border); flex-shrink:0; }

/* ── MISC ── */
.alert { padding:10px 14px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:14px; }
.alert-danger { background:var(--danger-l); color:var(--danger); border:1px solid #f5c6c3; }
.toast { position:fixed; bottom:20px; right:20px; background:var(--text); color:#fff; padding:10px 16px; border-radius:var(--radius-sm); font-size:13px; font-weight:500; opacity:0; transform:translateY(8px); transition:all .2s; pointer-events:none; z-index:999; max-width:320px; }
.toast.show { opacity:1; transform:translateY(0); }
.toast.success { background:var(--accent); }
.toast.error   { background:var(--danger); }
.empty-state { text-align:center; padding:40px 20px; color:var(--text3); }
.empty-state-icon { font-size:34px; margin-bottom:12px; }
.empty-state-title { font-size:15px; font-weight:500; color:var(--text2); margin-bottom:6px; }
.empty-state-sub { font-size:13px; margin-bottom:18px; }
.divider { border:none; border-top:1px solid var(--border); margin:14px 0; }
.text-muted { color:var(--text3); }
.text-sm { font-size:11px; }
.mono { font-family:'DM Mono',monospace; }
.flex-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.settings-section { margin-bottom:24px; }
.settings-title { font-size:14px; font-weight:600; margin-bottom:12px; border-bottom:1px solid var(--border); padding-bottom:8px; }
.room-detail { font-size:13px; }
.room-num-big { font-size:34px; font-weight:700; letter-spacing:-1px; font-family:'DM Mono',monospace; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:99px; }

/* ============================================================
   RESPONSIVE MÓVIL
   ============================================================ */
@media (max-width: 768px) {

  /* Sidebar deslizante */
  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    transform: translateX(-100%);
    box-shadow: 4px 0 20px rgba(0,0,0,.15);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .sidebar-backdrop.open,
  .sidebar.open ~ .sidebar-backdrop {
    display: block;
  }
  /* Mostrar backdrop cuando sidebar está open */
  .sidebar.open + * .sidebar-backdrop,
  #sidebar-backdrop { display: none; }
  .sidebar.open ~ #sidebar-backdrop,
  #app:has(.sidebar.open) #sidebar-backdrop { display: block; }

  /* Hamburger visible */
  .hamburger { display:flex !important; }

  /* Main ocupa todo */
  .main-content { width: 100%; }

  /* Stats en 2 columnas */
  .stats-bar { grid-template-columns: repeat(2, 1fr); padding:12px 14px 0; gap:8px; }

  /* View content padding menor */
  .view-content { padding:12px 14px; }
  .topbar { padding:10px 14px; }

  /* Cards */
  .card-body { padding:12px 14px; }
  .card-header { padding:10px 14px 8px; }

  /* Grid habitaciones: 2 columnas en móvil */
  .rooms-grid { grid-template-columns: repeat(2, 1fr); gap:8px; }

  /* iCal: columna única */
  .ical-layout { grid-template-columns: 1fr; }

  /* form-row-2 en columna */
  .form-row-2 { grid-template-columns: 1fr; }

  /* Topbar actions: solo iconos */
  .topbar-actions .btn span { display:none; }
  .topbar-actions { gap:6px; }

  /* Toast en la parte inferior centrado */
  .toast { left:14px; right:14px; bottom:14px; max-width:none; text-align:center; }

  /* Modal full-width */
  .modal-overlay { padding:10px; }
  .modal { max-width:100%; }

  /* ical-url más corta */
  .ical-url { max-width:140px; }

  /* Stat value más pequeño */
  .stat-value { font-size:18px; }
}

@media (max-width: 400px) {
  .rooms-grid { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: 1fr 1fr; }
}

/* ── Bloqueados en calendario (Booking/Airbnb) ── */
.cal-block-blocked {
  background: #e8e6e0;
  color: #6b6760;
  opacity: 0.85;
}