:root {
  --text: #6b6375;
  --text-h: #08060d;
  --bg: #fff;
  --border: #e5e4e7;
  --code-bg: #f4f3ec;
  --accent: #aa3bff;
  --accent-bg: rgba(170, 59, 255, 0.1);
  --accent-border: rgba(170, 59, 255, 0.5);
  --social-bg: rgba(244, 243, 236, 0.5);
  --shadow:
    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;

  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, Consolas, monospace;

  font: 18px/145% var(--sans);
  letter-spacing: 0.18px;
  color-scheme: light dark;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  @media (max-width: 1024px) {
    font-size: 16px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #9ca3af;
    --text-h: #f3f4f6;
    --bg: #16171d;
    --border: #2e303a;
    --code-bg: #1f2028;
    --accent: #c084fc;
    --accent-bg: rgba(192, 132, 252, 0.15);
    --accent-border: rgba(192, 132, 252, 0.5);
    --social-bg: rgba(47, 48, 58, 0.5);
    --shadow:
      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
  }

  #social .button-icon {
    filter: invert(1) brightness(2);
  }
}

body {
  margin: 0;
}

#root {
  width: 100%;
  max-width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

h1,
h2 {
  font-family: var(--heading);
  font-weight: 500;
  color: var(--text-h);
}

h1 {
  font-size: 56px;
  letter-spacing: -1.68px;
  margin: 32px 0;
  @media (max-width: 1024px) {
    font-size: 36px;
    margin: 20px 0;
  }
}
h2 {
  font-size: 24px;
  line-height: 118%;
  letter-spacing: -0.24px;
  margin: 0 0 8px;
  @media (max-width: 1024px) {
    font-size: 20px;
  }
}
p {
  margin: 0;
}

code,
.counter {
  font-family: var(--mono);
  display: inline-flex;
  border-radius: 4px;
  color: var(--text-h);
}

code {
  font-size: 15px;
  line-height: 135%;
  padding: 4px 8px;
  background: var(--code-bg);
}
/* ── Layout ──────────────────────────────────────────────────── */
.ap {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: var(--bg);
}

/* ── Header ──────────────────────────────────────────────────── */
.ap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.ap-header-titulo {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-h);
  letter-spacing: -0.2px;
}

.ap-header-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ap-usuario {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  padding-right: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

/* ── Tab nav ──────────────────────────────────────────────────── */
.ap-tabs {
  display: flex;
  gap: 0;
  padding: 0 40px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.ap-tab {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}

.ap-tab:hover {
  color: var(--text-h);
}

.ap-tab--activa {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Main content ────────────────────────────────────────────── */
.ap-main {
  flex: 1;
  padding: 32px 40px;
}

/* ── Section ─────────────────────────────────────────────────── */
.ap-seccion {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ap-seccion-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ap-seccion-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ap-seccion-titulo {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-h);
  margin: 0;
}

.ap-acciones {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Badge ───────────────────────────────────────────────────── */
.ap-badge {
  font-size: 12px;
  font-weight: 500;
  color: #d97706;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 20px;
  padding: 2px 10px;
}

@media (prefers-color-scheme: dark) {
  .ap-badge {
    background: rgba(217, 119, 6, 0.15);
    border-color: rgba(217, 119, 6, 0.3);
    color: #fbbf24;
  }
}

/* ── Messages ────────────────────────────────────────────────── */
.ap-msg {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

.ap-msg--ok {
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  color: #065f46;
}

.ap-msg--error {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

@media (prefers-color-scheme: dark) {
  .ap-msg--ok {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
  }
  .ap-msg--error {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
  }
}

/* ── Buttons ─────────────────────────────────────────────────── */
.ap-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  white-space: nowrap;
}

.ap-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ap-btn--primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.ap-btn--primary:hover:not(:disabled) {
  opacity: 0.88;
}

.ap-btn--danger {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

.ap-btn--danger:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
}

.ap-btn--danger:disabled {
  opacity: 0.6;
}

.ap-btn--secondary {
  background: var(--code-bg);
  color: var(--text-h);
  border-color: var(--border);
}

.ap-btn--secondary:hover:not(:disabled) {
  background: var(--border);
}

.ap-btn--ghost {
  background: none;
  color: var(--text);
  border-color: var(--border);
}

.ap-btn--ghost:hover {
  background: var(--code-bg);
  color: var(--text-h);
}

/* ── Table ───────────────────────────────────────────────────── */
.ap-tabla-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.ap-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.ap-tabla thead {
  background: var(--code-bg);
}

.ap-tabla th {
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.ap-tabla td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.ap-tabla tbody tr:last-child td {
  border-bottom: none;
}

.ap-tabla tbody tr:hover {
  background: var(--accent-bg);
}

.th-nombre {
  min-width: 140px;
}

.td-nombre {
  font-weight: 500;
  color: var(--text-h);
  padding-left: 12px;
  white-space: nowrap;
}

/* ── Modified / new row highlights ──────────────────────────── */
.tr-mod {
  background: rgba(251, 191, 36, 0.08) !important;
}

.tr-nueva {
  background: rgba(16, 185, 129, 0.07) !important;
}

/* ── Inputs inside table ─────────────────────────────────────── */
.ap-input {
  width: 100%;
  min-width: 72px;
  padding: 5px 8px;
  font-size: 14px;
  color: var(--text-h);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ap-input:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.ap-input--mod {
  border-color: #f59e0b;
  background: rgba(251, 191, 36, 0.06);
}

.ap-input--sm {
  min-width: 72px;
  max-width: 90px;
}

.ap-input--valor {
  min-width: 64px;
  max-width: 96px;
}

.ap-input--reason {
  min-width: 140px;
}

/* ── Prefix / suffix wrapper ─────────────────────────────────── */
.ap-valor-wrap {
  display: flex;
  align-items: center;
  gap: 0;
}

.ap-symbol {
  display: flex;
  align-items: center;
  padding: 5px 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 6px 0 0 6px;
  white-space: nowrap;
  user-select: none;
}

.ap-symbol--suffix {
  border-right: 1px solid var(--border);
  border-left: none;
  border-radius: 0 6px 6px 0;
}

.ap-valor-wrap .ap-input {
  border-radius: 0 6px 6px 0;
}

.ap-valor-wrap:has(.ap-symbol--suffix) .ap-input {
  border-radius: 6px 0 0 6px;
}

/* ── Tipo select (more compact) ──────────────────────────────── */
.ap-select--tipo {
  min-width: 110px;
}

.ap-select {
  width: 100%;
  min-width: 120px;
  padding: 5px 8px;
  font-size: 14px;
  color: var(--text-h);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.15s;
}

.ap-select:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

/* ── Delete button ───────────────────────────────────────────── */
.ap-btn-del {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ap-btn-del:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}

@media (prefers-color-scheme: dark) {
  .ap-btn-del:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
  }
}

/* ── Empty state ─────────────────────────────────────────────── */
.td-vacio {
  text-align: center;
  padding: 32px 16px !important;
  color: var(--text);
  font-style: italic;
  font-size: 14px;
}

/* ── Loading ─────────────────────────────────────────────────── */
.ap-loading {
  color: var(--text);
  font-size: 14px;
  padding: 24px 0;
}

/* ── Hint ────────────────────────────────────────────────────── */
.ap-hint {
  font-size: 12px;
  color: var(--text);
  margin: 0;
}

/* ── Creación masiva ─────────────────────────────────────────── */
.mc {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.mc-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-h);
  background: var(--code-bg);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.mc-toggle:hover {
  background: var(--border);
}

.mc-chevron {
  font-size: 11px;
  color: var(--text);
  transition: transform 0.2s;
  display: inline-block;
}

.mc-chevron--open {
  transform: rotate(90deg);
}

.mc-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border-top: 1px solid var(--border);
}

/* ── Selector de departamentos ───────────────────────────────── */
.mc-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mc-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.mc-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mc-batch-btns {
  display: flex;
  gap: 6px;
}

.mc-batch-btn {
  padding: 4px 10px;
  font-size: 12px;
}

.mc-apt-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mc-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-h);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.mc-check input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

.mc-check--sel {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent);
}

/* ── Campos de la regla ──────────────────────────────────────── */
.mc-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}

.mc-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mc-field--wide {
  flex: 1;
  min-width: 160px;
}

/* ── Footer ──────────────────────────────────────────────────── */
.mc-footer {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mc-hint {
  font-size: 12px;
  color: var(--text);
}

/* ── Calendario ──────────────────────────────────────────────── */
.cal {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.cal-apt-select {
  max-width: 320px;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.cal-nav-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: #2a1a14;
  background: white;
  border: 1.5px solid #e0dcd6;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.cal-nav-btn:hover {
  border-color: #d96b4a;
  color: #d96b4a;
}

.cal-mes-label {
  font-size: 22px;
  font-weight: 700;
  color: #2a1a14;
  min-width: 200px;
  text-align: center;
}

/* ── Grilla ──────────────────────────────────────────────────── */
.cal-grid-wrap {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(42, 26, 20, 0.08);
  overflow-x: auto;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  min-width: 560px;
}

.cal-dow {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #8a7a70;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 0 10px;
}

.cal-cell {
  aspect-ratio: 1;
  min-height: 80px;
  background: white;
  border: 2px solid #e0dcd6;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s;
  position: relative;
  overflow: hidden;
}

.cal-cell:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(42, 26, 20, 0.12);
  border-color: #d96b4a;
}

.cal-cell--empty {
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}
.cal-cell--empty:hover {
  transform: none;
  box-shadow: none;
}

/* Hoy */
.cal-cell--hoy {
  border-color: #d96b4a;
}
.cal-cell--hoy .cal-dia-num {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d96b4a;
  color: white;
  border-radius: 50%;
  font-size: 16px;
}

/* ── Selección múltiple ─────────────────────────────────────── */
.cal-cell--seleccionado {
  background: rgba(217, 107, 74, 0.12);
  border-color: #d96b4a;
}

.cal-cell--rango-preview {
  background: rgba(217, 107, 74, 0.07);
  border: 2px dashed #d96b4a;
  opacity: 0.85;
}

.cal-seleccion-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(217, 107, 74, 0.08);
  border: 1.5px solid rgba(217, 107, 74, 0.3);
  border-radius: 10px;
}

.cal-seleccion-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cal-seleccion-count {
  font-size: 13px;
  font-weight: 600;
  color: #2a1a14;
}

.cal-seleccion-hint {
  font-size: 11px;
  color: #8a7a70;
}

/* ── Contenido de celda ─────────────────────────────────────── */
.cal-dia-num {
  font-size: 20px;
  font-weight: 700;
  color: #2a1a14;
  line-height: 1;
}

.cal-dia-precio {
  font-size: 14px;
  font-weight: 600;
  color: #8a7a70;
}

.cal-dia-motivo {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #fff8b8;
  color: #b38a00;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.cal-dia-motivo--bloqueo {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  word-break: break-word;
  line-height: 1.3;
}

/* ── Celdas bloqueadas ──────────────────────────────────────── */
.cal-cell--airbnb            { background: #ffe8e0; border-color: #f5b5a0; }
.cal-cell--airbnb:hover      { background: #ffd8cc; border-color: #d96b4a; }
.cal-cell--airbnb .cal-dia-num { color: #c85830; }
.cal-cell--airbnb .cal-dia-motivo--bloqueo { background: #ffcdc0; color: #c85830; }

.cal-cell--direct            { background: #e0f2ff; border-color: #a8d9ff; }
.cal-cell--direct:hover      { background: #cce8ff; border-color: #d96b4a; }
.cal-cell--direct .cal-dia-num { color: #1563b3; }
.cal-cell--direct .cal-dia-motivo--bloqueo { background: #b8e1ff; color: #1563b3; }

.cal-cell--cleaning          { background: #e0f7ff; border-color: #a8e6ff; }
.cal-cell--cleaning:hover    { background: #ccf1ff; border-color: #d96b4a; }
.cal-cell--cleaning .cal-dia-num { color: #007aa3; }
.cal-cell--cleaning .cal-dia-motivo--bloqueo { background: #b8f1ff; color: #007aa3; }

.cal-cell--maint             { background: #f5e8eb; border-color: #e0b8c8; }
.cal-cell--maint:hover       { background: #ebd5db; border-color: #d96b4a; }
.cal-cell--maint .cal-dia-num { color: #722f37; }
.cal-cell--maint .cal-dia-motivo--bloqueo { background: #e8cdd9; color: #722f37; }

.cal-cell--regla             { background: #fffce0; border-color: #f5edb5; }
.cal-cell--regla:hover       { background: #fff8c4; border-color: #d96b4a; }
.cal-cell--regla .cal-dia-precio { color: #b38a00; }

/* ── Leyenda ─────────────────────────────────────────────────── */
.cal-leyenda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(42, 26, 20, 0.08);
}

.cal-leyenda-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #8a7a70;
}

.cal-leyenda-dot {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  flex-shrink: 0;
}

.cal-leyenda-dot--base     { background: white;   border: 2px solid #e0dcd6; }
.cal-leyenda-dot--regla    { background: #fffce0; border: 2px solid #f5edb5; }
.cal-leyenda-dot--airbnb   { background: #ffe8e0; border: 2px solid #f5b5a0; }
.cal-leyenda-dot--direct   { background: #e0f2ff; border: 2px solid #a8d9ff; }
.cal-leyenda-dot--cleaning { background: #e0f7ff; border: 2px solid #a8e6ff; }
.cal-leyenda-dot--maint    { background: #f5e8eb; border: 2px solid #e0b8c8; }

/* ── Modal ────────────────────────────────────────────────────── */
.cal-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}

.cal-modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.cal-modal-titulo {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-h);
  margin: 0;
}

.cal-modal-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
  transition: background 0.15s;
}
.cal-modal-close:hover { background: var(--code-bg); }

.cal-modal-info {
  padding: 14px 20px;
  background: var(--code-bg);
  border-bottom: 1px solid var(--border);
}

.cal-modal-precio-actual {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: var(--text-h);
}
.cal-modal-precio-actual strong { font-size: 24px; font-weight: 700; }

.cal-modal-fuente { font-size: 12px; color: var(--text); }
.cal-modal-fuente--regla { color: #b38a00; }

.cal-modal-form {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cal-modal-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-h);
  margin: 0;
}

.cal-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.cal-modal-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.cal-modal-tab {
  flex: 1;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.cal-modal-tab:hover { color: var(--text-h); }
.cal-modal-tab--activa { color: var(--accent); border-bottom-color: var(--accent); }

.cal-modal-info--airbnb { background: #ffe8e0; border-bottom-color: #f5b5a0; }
.cal-modal-info--direct { background: #e0f2ff; border-bottom-color: #a8d9ff; }
.cal-modal-info--maint  { background: #f5e8eb; border-bottom-color: #e0b8c8; }

/* ── Dark mode ────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .cal-grid-wrap { background: var(--bg); box-shadow: none; border: 1px solid var(--border); }
  .cal-leyenda   { background: var(--bg); box-shadow: none; border: 1px solid var(--border); }
  .cal-nav-btn   { background: var(--code-bg); border-color: var(--border); color: var(--text-h); }
  .cal-mes-label { color: var(--text-h); }

  .cal-cell              { background: var(--bg); border-color: var(--border); }
  .cal-cell:hover        { border-color: var(--accent); }
  .cal-cell--hoy         { border-color: var(--accent); }
  .cal-cell--hoy .cal-dia-num { background: var(--accent); }
  .cal-dia-num           { color: var(--text-h); }
  .cal-leyenda-item      { color: var(--text); }

  .cal-cell--regla         { background: rgba(179, 138, 0, 0.15); border-color: rgba(179, 138, 0, 0.35); }
  .cal-cell--regla:hover   { background: rgba(179, 138, 0, 0.25); }
  .cal-cell--regla .cal-dia-precio { color: #f5c842; }
  .cal-dia-motivo          { background: rgba(179, 138, 0, 0.2); color: #f5c842; }
  .cal-modal-fuente--regla { color: #f5c842; }

  .cal-cell--airbnb            { background: rgba(200, 88, 48, 0.15); border-color: rgba(200, 88, 48, 0.4); }
  .cal-cell--airbnb:hover      { background: rgba(200, 88, 48, 0.25); }
  .cal-cell--airbnb .cal-dia-num { color: #f59070; }
  .cal-cell--airbnb .cal-dia-motivo--bloqueo { background: rgba(200, 88, 48, 0.2); color: #f59070; }

  .cal-cell--direct            { background: rgba(21, 99, 179, 0.15); border-color: rgba(21, 99, 179, 0.4); }
  .cal-cell--direct:hover      { background: rgba(21, 99, 179, 0.25); }
  .cal-cell--direct .cal-dia-num { color: #60a5fa; }
  .cal-cell--direct .cal-dia-motivo--bloqueo { background: rgba(21, 99, 179, 0.2); color: #60a5fa; }

  .cal-cell--cleaning          { background: rgba(0, 122, 163, 0.15); border-color: rgba(0, 122, 163, 0.4); }
  .cal-cell--cleaning:hover    { background: rgba(0, 122, 163, 0.25); }
  .cal-cell--cleaning .cal-dia-num { color: #38bdf8; }
  .cal-cell--cleaning .cal-dia-motivo--bloqueo { background: rgba(0, 122, 163, 0.2); color: #38bdf8; }

  .cal-cell--maint             { background: rgba(114, 47, 55, 0.15); border-color: rgba(114, 47, 55, 0.4); }
  .cal-cell--maint:hover       { background: rgba(114, 47, 55, 0.25); }
  .cal-cell--maint .cal-dia-num { color: #f9a8b8; }
  .cal-cell--maint .cal-dia-motivo--bloqueo { background: rgba(114, 47, 55, 0.2); color: #f9a8b8; }

  .cal-leyenda-dot--base     { background: var(--code-bg); border-color: var(--border); }
  .cal-leyenda-dot--regla    { background: rgba(179, 138, 0, 0.2);  border-color: rgba(179, 138, 0, 0.4); }
  .cal-leyenda-dot--airbnb   { background: rgba(200, 88, 48, 0.2);  border-color: rgba(200, 88, 48, 0.4); }
  .cal-leyenda-dot--direct   { background: rgba(21, 99, 179, 0.2);  border-color: rgba(21, 99, 179, 0.4); }
  .cal-leyenda-dot--cleaning { background: rgba(0, 122, 163, 0.2);  border-color: rgba(0, 122, 163, 0.4); }
  .cal-leyenda-dot--maint    { background: rgba(114, 47, 55, 0.2);  border-color: rgba(114, 47, 55, 0.4); }

  .cal-modal-info--airbnb { background: rgba(200, 88, 48, 0.12);  border-bottom-color: rgba(200, 88, 48, 0.3); }
  .cal-modal-info--direct { background: rgba(21, 99, 179, 0.12);  border-bottom-color: rgba(21, 99, 179, 0.3); }
  .cal-modal-info--maint  { background: rgba(114, 47, 55, 0.12);  border-bottom-color: rgba(114, 47, 55, 0.3); }
}

/* ── Reservas ────────────────────────────────────────────────── */
.res {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.res-alertas {
  padding: 0;   /* ap-seccion ya tiene su propio padding lateral */
  gap: 8px;
}

.res-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.res-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text);
  margin: 14px 0 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.res-group-label:first-child {
  margin-top: 0;
}

.res-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.res-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 160px;
}

.res-field--wide {
  min-width: 280px;
  flex: 2;
}

.res-field--xs {
  min-width: 110px;
  flex: 0 1 130px;
}

.res-field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

.res-notas {
  resize: vertical;
  font-family: var(--sans);
  line-height: 1.4;
}

.res-saldo-input {
  background: var(--code-bg) !important;
  color: var(--text) !important;
  cursor: default;
}

/* Badges de estado */
.res-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.res-badge--ok {
  background: #dcfce7;
  color: #15803d;
}

.res-badge--warn {
  background: #fef9c3;
  color: #92400e;
}

.res-badge--cancel {
  background: #fee2e2;
  color: #991b1b;
}

/* Celdas de tabla */
.res-td-huesped {
  font-weight: 500;
  color: var(--text-h);
  min-width: 120px;
  white-space: nowrap;
}

.res-td-depto {
  min-width: 80px;
  white-space: nowrap;
  color: var(--text);
}

.res-td-fecha {
  white-space: nowrap;
  font-size: 13px;
}

.res-td-num {
  text-align: right;
  white-space: nowrap;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.res-td-saldo--pendiente {
  color: #dc2626;
  font-weight: 600;
}

.res-td-notas {
  font-size: 12px;
  color: var(--text);
  max-width: 200px;
}

@media (prefers-color-scheme: dark) {
  .res-badge--ok     { background: rgba(21, 128, 61, 0.2);  color: #4ade80; }
  .res-badge--warn   { background: rgba(146, 64, 14, 0.2);  color: #fbbf24; }
  .res-badge--cancel { background: rgba(153, 27, 27, 0.2);  color: #f87171; }
  .res-td-saldo--pendiente { color: #f87171; }
}

/* ── Limpiezas ───────────────────────────────────────────────── */
.limp {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Sección "Necesitan atención" ────────────────────────────── */
.limp-atencion {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--border);
}

.limp-atencion-titulo {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-h);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.limp-atencion-ok {
  font-size: 14px;
  color: #16a34a;
  font-weight: 500;
  padding: 12px 0;
}

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

.limp-aten-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.limp-aten-card--sucio {
  background: rgba(220, 38, 38, 0.05);
  border-color: rgba(220, 38, 38, 0.3);
}

.limp-aten-card--repaso {
  background: rgba(217, 119, 6, 0.05);
  border-color: rgba(217, 119, 6, 0.3);
}

.limp-aten-nombre {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-h);
}

.limp-aten-estado {
  font-size: 13px;
  font-weight: 600;
}

.limp-aten-reserva {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}

.limp-aten-sin-reserva {
  font-style: italic;
  color: var(--text);
}

.limp-aten-dias {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--code-bg);
  color: var(--text);
  white-space: nowrap;
}

.limp-aten-dias--urgente {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

.limp-aten-dias--proximo {
  background: rgba(217, 119, 6, 0.12);
  color: #d97706;
}


.limp-aten-btn {
  margin-top: 4px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--accent-border);
  background: var(--accent-bg);
  color: var(--accent);
  cursor: pointer;
  width: 100%;
  transition: opacity 0.15s;
}
.limp-aten-btn:hover { opacity: 0.8; }

.limp-asignar-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.limp-asignar-staff-row {
  display: flex;
  flex-direction: row;
  gap: 6px;
}

.limp-asignar-cancel-btn {
  padding: 5px;
  font-size: 12px;
  border: none;
  background: none;
  color: var(--text);
  cursor: pointer;
  opacity: 0.6;
  text-align: center;
}
.limp-asignar-cancel-btn:hover { opacity: 1; }

.limp-asignar-staff-btn {
  flex: 1;
  padding: 8px 6px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--accent-border);
  background: var(--accent-bg);
  color: var(--accent);
  cursor: pointer;
  text-align: center;
  transition: opacity 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.limp-asignar-staff-btn:hover:not(:disabled) { opacity: 0.75; }
.limp-asignar-staff-btn:disabled { opacity: 0.5; cursor: default; }


/* ── Sección tareas ──────────────────────────────────────────── */
.limp-tareas-seccion {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 8px;
}

/* ── Toolbar ─────────────────────────────────────────────────── */
.limp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.limp-filtros {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.limp-filtro-btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.limp-filtro-btn:hover {
  background: var(--code-bg);
  color: var(--text-h);
}

.limp-filtro-btn--activo {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent);
}

.limp-form-manual {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  background: var(--code-bg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Filas coloreadas por estado */
.limp-tr--done { background: rgba(21, 128, 61, 0.05) !important; }
.limp-tr--proc { background: rgba(194, 65, 12, 0.05) !important; }

.limp-td-reserva {
  font-size: 13px;
  color: var(--text-h);
  white-space: nowrap;
}

.limp-sin-reserva {
  color: var(--text);
  font-style: italic;
  font-size: 12px;
}

/* Select de personal: rojo cuando sin asignar */
.limp-select-staff {
  min-width: 130px;
}

.limp-select-staff--vacio {
  color: #dc2626;
  border-color: #fca5a5;
}

.limp-select-estado {
  min-width: 120px;
}

@media (prefers-color-scheme: dark) {
  .limp-tr--done { background: rgba(21, 128, 61, 0.08) !important; }
  .limp-tr--proc { background: rgba(194, 65, 12, 0.08) !important; }
  .limp-select-staff--vacio { color: #f87171; border-color: rgba(239, 68, 68, 0.4); }
  .limp-aten-card--sucio  { background: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.35); }
  .limp-aten-card--repaso { background: rgba(217, 119, 6,  0.1); border-color: rgba(217, 119, 6,  0.35); }
  .limp-aten-dias--urgente { background: rgba(220, 38, 38, 0.2); color: #f87171; }
  .limp-aten-dias--proximo { background: rgba(217, 119, 6, 0.2); color: #fbbf24; }
  .limp-atencion-ok { color: #4ade80; }
}

/* ── Reservaciones: autocomplete de huéspedes ───────────────── */
.res-sugg-container {
  position: relative;
}

.res-suggs {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  background: var(--bg);
  border: 1px solid var(--accent-border);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  z-index: 200;
  overflow: hidden;
}

.res-sugg-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 13px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  cursor: pointer;
  transition: background 0.1s;
}

.res-sugg-item:last-child { border-bottom: none; }
.res-sugg-item:hover      { background: var(--accent-bg); }

.res-sugg-nombre {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-h);
}

.res-sugg-info {
  display: block;
  font-size: 11px;
  color: var(--text);
  margin-top: 2px;
  opacity: 0.7;
}

.res-input--linked {
  border-color: var(--accent-border);
  background: var(--accent-bg);
}

.res-linked-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  text-transform: none;
  letter-spacing: 0;
}

/* ── Huéspedes ───────────────────────────────────────────────── */
.hu {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hu-buscar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hu-buscar {
  flex: 1;
  max-width: 400px;
}

.hu-buscar-count {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}

.hu-refresh {
  padding: 6px 11px;
  font-size: 15px;
}

/* Guest list */
.hu-tc {
  text-align: center !important;
}

.hu-tr {
  cursor: pointer;
  transition: background 0.1s;
}

.hu-tr:hover  { background: var(--code-bg); }
.hu-tr--activo { background: var(--accent-bg) !important; }

.hu-td-nombre {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hu-nombre {
  font-weight: 600;
  color: var(--text-h);
}

.hu-badge-rec {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(21,128,61,0.12);
  color: #15803d;
  white-space: nowrap;
}

.hu-td-loc { font-size: 13px; }

.hu-ciudad {
  display: block;
  font-size: 11px;
  color: var(--text);
  opacity: 0.7;
  margin-top: 1px;
}

.hu-td-tel { font-size: 13px; white-space: nowrap; }

.hu-td-total {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hu-nd {
  color: var(--text);
  opacity: 0.4;
  font-style: italic;
}

/* Detail row */
.hu-tr-det > td {
  padding: 0;
  background: var(--code-bg);
  border-bottom: 2px solid var(--accent-border);
}

.hu-td-det { padding: 0 !important; }

.hu-detalle {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hu-detalle-top {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.hu-card {
  flex: 1;
  min-width: 220px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}

.hu-card--stats { flex: 1.5; }

.hu-card-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text);
  margin: 0 0 12px;
}

.hu-campos {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.hu-campo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}

.hu-campo-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  min-width: 100px;
  flex-shrink: 0;
}

.hu-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.hu-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hu-stat-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-h);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
}

.hu-stat-apt {
  font-size: 14px;
}

.hu-stat-lbl {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text);
  opacity: 0.65;
}

/* History table */
.hu-hist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hu-hist-tabla {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

@media (prefers-color-scheme: dark) {
  .hu-badge-rec { background: rgba(21,128,61,0.18); color: #4ade80; }
}

@media (max-width: 768px) {
  .hu-stats-grid { grid-template-columns: 1fr 1fr; }
  .hu-detalle-top { flex-direction: column; }
}

/* ── Pagos ───────────────────────────────────────────────────── */
.pag {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Métricas */
.pag-metricas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.pag-met {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 20px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--code-bg);
}

.pag-met-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text);
}

.pag-met-num {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-h);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}

.pag-met-num--cobrado { color: #16a34a; }
.pag-met-num--pend    { color: #d97706; }
.pag-met-num--mes     { color: #7c3aed; }

.pag-met-sub {
  font-size: 11px;
  color: var(--text);
  opacity: 0.65;
}

/* Secciones */
.pag-seccion {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  background: var(--bg);
}

.pag-seccion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.pag-seccion-titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-h);
}

.pag-controles {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pag-limpiar-mes {
  font-size: 12px;
  padding: 5px 10px;
  white-space: nowrap;
}

/* Gráfico */
.pag-grafico-wrap { width: 100%; }

/* Leyenda del gráfico */
.pag-grafico-leyenda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 4px;
  margin-bottom: 2px;
}

.pag-ley {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
}

.pag-ley::before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}

.pag-ley--cobrado::before { background: #7c3aed; }
.pag-ley--estimado::before { background: #38bdf8; opacity: 0.75; }

/* Badge Cobrada / Estimada */
.pag-tipo {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.pag-tipo--cobrada {
  background: rgba(21, 128, 61, 0.09);
  color: #15803d;
}

.pag-tipo--estimada {
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
}

.pag-grafico-hint {
  font-size: 12px;
  color: var(--text);
  margin: 0;
  opacity: 0.65;
}

/* Tabla */
.pag-tc {
  text-align: center !important;
}

.pag-td-huesped {
  font-weight: 500;
  color: var(--text-h);
  white-space: nowrap;
}

.pag-td-total {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-h);
}

.pag-td-pagos {
  font-size: 12px;
  white-space: nowrap;
}

.pag-pagado  { color: #16a34a; font-weight: 500; }
.pag-restan  { color: #d97706; }
.pag-completo { color: #16a34a; font-weight: 700; }

/* Estado badges */
.pag-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.pag-badge--confirmada { background: rgba(21,128,61,0.1); color: #15803d; }
.pag-badge--senada     { background: rgba(217,119,6,0.1); color: #b45309; }
.pag-badge--cancelada  { background: rgba(100,116,139,0.1); color: #64748b; }

/* Filas */
.pag-tr--pasada > td { opacity: 0.7; }
.pag-tr--cancelada > td { opacity: 0.4; }

/* Tfoot */
.pag-tfoot-label {
  text-align: right;
  padding-right: 16px !important;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

.pag-tfoot-total {
  font-size: 15px;
  font-weight: 700;
}

@media (prefers-color-scheme: dark) {
  .pag-met-num--cobrado { color: #4ade80; }
  .pag-met-num--pend    { color: #fbbf24; }
  .pag-met-num--mes     { color: #a78bfa; }
  .pag-pagado           { color: #4ade80; }
  .pag-restan           { color: #fbbf24; }
  .pag-completo         { color: #4ade80; }
  .pag-badge--confirmada { background: rgba(21,128,61,0.15); color: #4ade80; }
  .pag-badge--senada     { background: rgba(217,119,6,0.15);  color: #fbbf24; }
  .pag-tipo--cobrada     { background: rgba(21,128,61,0.12);  color: #4ade80; }
  .pag-tipo--estimada    { background: rgba(14,165,233,0.15); color: #38bdf8; }
}

@media (max-width: 900px) {
  .pag-metricas { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .pag-metricas { grid-template-columns: 1fr; }
}

/* ── Vista General ───────────────────────────────────────────── */
.vg {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vg-header-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vg-sync-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vg-sync-ultima {
  font-size: 11px;
  color: var(--text);
  opacity: 0.5;
  white-space: nowrap;
}

.vg-sync-progreso {
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
  animation: vg-pulse 1s ease-in-out infinite alternate;
}

@keyframes vg-pulse {
  from { opacity: 0.6; }
  to   { opacity: 1;   }
}

.vg-sync-btn {
  white-space: nowrap;
}

.vg-subtitulo {
  font-size: 13px;
  color: var(--text);
}

.vg-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.vg-tabla {
  border-collapse: collapse;
  white-space: nowrap;
  min-width: max-content;
  width: 100%;
}

/* Header cells */
.vg-th {
  background: var(--code-bg);
  border-bottom: 2px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: center;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 2;
}

.vg-th:last-child { border-right: none; }

.vg-th-apt {
  min-width: 148px;
  width: 148px;
  text-align: left;
  padding: 10px 14px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text);
  left: 0;
  z-index: 3;
}

.vg-th-dia {
  min-width: 56px;
  width: 56px;
  padding: 6px 2px 8px;
}

.vg-th-dia--wk {
  background: rgba(100, 116, 139, 0.1);
}

.vg-th-dow {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text);
  opacity: 0.75;
}

.vg-th-num {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-h);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.vg-th-mes {
  display: block;
  font-size: 9px;
  font-weight: 500;
  color: var(--text);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Body */
.vg-tr:hover .vg-td-apt { background: var(--code-bg); }

.vg-td {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  height: 38px;
  padding: 0;
  vertical-align: middle;
}

.vg-td:last-child { border-right: none; }
.vg-tr:last-child .vg-td { border-bottom: none; }

/* Sticky apartment name column */
.vg-td-apt {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg);
  min-width: 148px;
  width: 148px;
  padding: 6px 14px;
  transition: background 0.1s;
}

.vg-td-apt::after {
  content: '';
  position: absolute;
  top: 0;
  right: -5px;
  bottom: 0;
  width: 5px;
  background: linear-gradient(to right, rgba(0,0,0,0.06), transparent);
  pointer-events: none;
}

.vg-apt-nombre {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-h);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vg-apt-code {
  display: block;
  font-size: 10px;
  color: var(--text);
  opacity: 0.65;
  margin-top: 1px;
}

/* Cells */
.vg-celda {
  text-align: center;
  width: 56px;
  min-width: 56px;
  padding: 2px 4px;
}

.vg-celda--libre {
  background: var(--bg);
}

.vg-celda--libre:hover,
.vg-celda--wk:hover {
  background: var(--accent-bg);
}

.vg-celda--wk {
  background: rgba(100, 116, 139, 0.06);
}

.vg-precio {
  font-size: 10px;
  font-weight: 500;
  color: var(--text);
  opacity: 0.6;
}

/* Reserva directa — verde */
.vg-celda--directa {
  background: #16a34a;
  cursor: default;
}
.vg-celda--directa:hover { background: #15803d; }

/* Airbnb reserva real — azul */
.vg-celda--airbnb {
  background: #2563eb;
  cursor: default;
}
.vg-celda--airbnb:hover { background: #1d4ed8; }

/* Airbnb limpieza automática — celeste grisáceo */
.vg-celda--airbnb-limpieza {
  background: #7dd3fc;
  color: #0c4a6e !important;
  cursor: default;
}
.vg-celda--airbnb-limpieza:hover { background: #38bdf8; }

/* Airbnb bloqueo manual — gris */
.vg-celda--airbnb-block {
  background: #64748b;
  cursor: default;
}
.vg-celda--airbnb-block:hover { background: #475569; }

/* Airbnb "Not available" genérico (sin reserva ni limpieza) — malbec */
.vg-celda--airbnb-noinfo {
  background: #722F37;
  cursor: default;
}
.vg-celda--airbnb-noinfo:hover { background: #5c252c; }

/* Mantenimiento — malbec, igual que Airbnb (no disponible) */
.vg-celda--mant {
  background: #722F37;
  cursor: default;
}
.vg-celda--mant:hover { background: #5c252c; }

.vg-celda-txt {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}

/* Leyenda */
.vg-leyenda {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.vg-ley-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
}

.vg-ley-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.vg-ley-dot--libre        { background: var(--bg); }
.vg-ley-dot--wk           { background: rgba(100, 116, 139, 0.12); }
.vg-ley-dot--directa      { background: #16a34a; border-color: #16a34a; }
.vg-ley-dot--airbnb          { background: #2563eb; border-color: #2563eb; }
.vg-ley-dot--airbnb-limpieza { background: #7dd3fc; border-color: #38bdf8; }
.vg-ley-dot--airbnb-block    { background: #64748b; border-color: #64748b; }
.vg-ley-dot--airbnb-noinfo   { background: #722F37; border-color: #722F37; }
.vg-ley-dot--mant         { background: #722F37; border-color: #722F37; }

@media (prefers-color-scheme: dark) {
  .vg-celda--directa      { background: #15803d; }
  .vg-celda--directa:hover { background: #166534; }
  .vg-celda--airbnb       { background: #1d4ed8; }
  .vg-celda--airbnb:hover { background: #1e40af; }
  .vg-celda--airbnb-block { background: #475569; }
  .vg-celda--airbnb-block:hover { background: #334155; }
  .vg-celda--mant         { background: #8b3a44; }
  .vg-celda--mant:hover   { background: #722F37; }
  .vg-td-apt::after { background: linear-gradient(to right, rgba(0,0,0,0.15), transparent); }
  .vg-ley-dot--directa      { background: #15803d; border-color: #15803d; }
  .vg-celda--airbnb-limpieza      { background: #0369a1; color: #e0f2fe !important; }
  .vg-celda--airbnb-limpieza:hover { background: #0284c7; }
  .vg-ley-dot--airbnb          { background: #1d4ed8; border-color: #1d4ed8; }
  .vg-ley-dot--airbnb-limpieza { background: #0369a1; border-color: #0369a1; }
  .vg-ley-dot--airbnb-block    { background: #475569; border-color: #475569; }
  .vg-celda--airbnb-noinfo      { background: #8b3a44; }
  .vg-celda--airbnb-noinfo:hover { background: #722F37; }
  .vg-ley-dot--airbnb-noinfo   { background: #8b3a44; border-color: #8b3a44; }
  .vg-ley-dot--mant         { background: #8b3a44; border-color: #8b3a44; }
}

/* ── Canal badge (tabla de reservas) ─────────────────────────── */
.res-canal {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in srgb, var(--canal-color, var(--border)) 14%, transparent);
  color: var(--canal-color, var(--text));
  letter-spacing: 0.1px;
  white-space: nowrap;
}

.res-canal--none {
  color: var(--text);
  opacity: 0.35;
  background: none;
  padding: 0;
}

/* ── Edit button ──────────────────────────────────────────────── */
.ap-btn-edit {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: background 0.12s, color 0.12s, opacity 0.12s;
  padding: 0;
  line-height: 1;
}

.ap-btn-edit:hover {
  background: var(--accent-bg);
  color: var(--accent);
  opacity: 1;
}

.ap-btn-edit--active {
  background: var(--code-bg);
  opacity: 1;
  color: var(--text-h);
}

/* ── Edit row styles ──────────────────────────────────────────── */
.res-tr--editando td {
  background: color-mix(in srgb, var(--accent) 5%, var(--bg));
}

.res-tr-edit-panel td {
  padding: 0 !important;
}

.res-edit-panel {
  padding: 16px 20px 20px;
  background: var(--code-bg);
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--border);
}

.res-edit-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 14px;
}

.res-edit-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 140px;
  flex: 1;
}

.res-edit-field--xs { min-width: 110px; flex: 0 0 auto; }
.res-edit-field--wide { flex: 1 1 100%; min-width: unset; }

.res-edit-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.res-edit-acciones {
  display: flex;
  gap: 8px;
}

/* ── Canal breakdown in Pagos ─────────────────────────────────── */
.pag-canal-total {
  font-size: 13px;
  color: var(--text);
  opacity: 0.65;
}

.pag-canales {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pag-canal-fila {
  display: grid;
  grid-template-columns: 100px 1fr 48px 36px;
  align-items: center;
  gap: 12px;
}

.pag-canal-nombre {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.pag-canal-fila--sin .pag-canal-nombre {
  color: var(--text);
  opacity: 0.5;
  font-weight: 500;
}

.pag-canal-barra-wrap {
  height: 10px;
  background: var(--code-bg);
  border-radius: 99px;
  overflow: hidden;
}

.pag-canal-barra {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
  min-width: 2px;
  opacity: 0.85;
}

.pag-canal-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-h);
  text-align: right;
}

.pag-canal-count {
  font-size: 12px;
  color: var(--text);
  opacity: 0.55;
  text-align: right;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ap-header { padding: 12px 20px; }
  .ap-tabs { padding: 0 20px; }
  .ap-main { padding: 20px; }
  .ap-tab { padding: 10px 14px; font-size: 13px; }
  .ap-seccion-header { flex-direction: column; align-items: flex-start; }
  .ap-acciones { width: 100%; justify-content: flex-end; }
  .mc-fields { flex-direction: column; }
  .mc-field--wide { min-width: unset; }
  .cal-toolbar { flex-direction: column; align-items: flex-start; }
  .cal-apt-select { max-width: 100%; width: 100%; }
  .cal-mes-label { min-width: 140px; font-size: 14px; }
  .cal-cell { min-height: 64px; padding: 6px 7px; }
  .cal-dia-precio { font-size: 12px; }
  .cal-leyenda-item--hint { display: none; }
  .cal-seleccion-hint { display: none; }
  .cal-seleccion-bar { flex-direction: column; align-items: flex-start; }
  .cal-modal-form .mc-fields { flex-direction: column; }
  .res-fields { flex-direction: column; }
  .res-field, .res-field--wide, .res-field--xs { min-width: unset; flex: none; width: 100%; }
}
/* ── Layout ──────────────────────────────────────────────────── */
.dash {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* ── Loading splash ──────────────────────────────────────────── */
.dash-splash {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--text);
  font-size: 15px;
}

.dash-splash-dots {
  display: flex;
  gap: 6px;
}

.dash-splash-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: dash-pulse 1.2s ease-in-out infinite;
}

.dash-splash-dots span:nth-child(2) { animation-delay: 0.2s; }
.dash-splash-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dash-pulse {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40%            { opacity: 1;   transform: scale(1);   }
}

/* ── Header ──────────────────────────────────────────────────── */
.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

.dash-header-brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.dash-titulo {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-h);
  letter-spacing: -0.3px;
}

.dash-sub {
  font-size: 13px;
  color: var(--text);
}

.dash-header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-nav-btn {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.dash-nav-btn:hover {
  background: var(--code-bg);
  color: var(--text-h);
}

.dash-nav-btn--accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.dash-nav-btn--accent:hover {
  opacity: 0.88;
  background: var(--accent);
}

.dash-nav-btn--icon {
  padding: 7px 11px;
  font-size: 16px;
}

.dash-nav-btn--logout {
  border-color: transparent;
  color: var(--text);
  opacity: 0.7;
}

.dash-nav-btn--logout:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  opacity: 1;
}

.dash-usuario {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* ── Resumen barra de estado ─────────────────────────────────── */
.dash-resumen {
  display: flex;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
  background: var(--code-bg);
  flex-shrink: 0;
}

.dash-resumen-grupo {
  display: flex;
  align-items: stretch;
  flex: 1;
}

.dash-resumen-titulo {
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text);
  white-space: nowrap;
  border-right: 1px solid var(--border);
}

.dash-resumen-contadores {
  display: flex;
  align-items: stretch;
  flex: 1;
}

.dash-resumen-divider {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
}

.dash-contador {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 16px 0;
  flex: 1;
  border-right: 1px solid var(--border);
}

.dash-contador:last-child {
  border-right: none;
}

.dash-contador-num {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dash-contador-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

/* Números coloreados por tipo */
.dash-contador--listo      .dash-contador-num { color: #16a34a; }
.dash-contador--sucio      .dash-contador-num { color: #dc2626; }
.dash-contador--repaso     .dash-contador-num { color: #d97706; }
.dash-contador--limpiando  .dash-contador-num { color: #2563eb; }
.dash-contador--vacio      .dash-contador-num { color: #16a34a; }
.dash-contador--ocupado    .dash-contador-num { color: #7c3aed; }

@media (prefers-color-scheme: dark) {
  .dash-contador--listo     .dash-contador-num { color: #4ade80; }
  .dash-contador--sucio     .dash-contador-num { color: #f87171; }
  .dash-contador--repaso    .dash-contador-num { color: #fbbf24; }
  .dash-contador--limpiando .dash-contador-num { color: #60a5fa; }
  .dash-contador--vacio     .dash-contador-num { color: #4ade80; }
  .dash-contador--ocupado   .dash-contador-num { color: #a78bfa; }
}

/* ── Cards grid ──────────────────────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 20px 32px 32px;
}

/* ── Card ────────────────────────────────────────────────────── */
.dash-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  transition: box-shadow 0.15s;
}

.dash-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.dash-card--listo {
  background: rgba(21, 128, 61, 0.05);
  border-color: rgba(21, 128, 61, 0.25);
}

.dash-card--sucio {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.28);
}

.dash-card--repaso {
  background: rgba(217, 119, 6, 0.06);
  border-color: rgba(217, 119, 6, 0.28);
}

.dash-card--limpiando {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.28);
}

.dash-card--sin {
  background: var(--code-bg);
}

.dash-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.dash-card-nombre {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-h);
  letter-spacing: -0.4px;
}

.dash-card-badge {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
  padding-top: 3px;
}

.dash-card-edificio {
  font-size: 12px;
  color: var(--text);
  margin-top: -4px;
}

/* ── Badges ──────────────────────────────────────────────────── */
.dash-card-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.dash-badge-limp {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.dash-badge-ocup {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.dash-badge-ocup--ocupado {
  font-weight: 700;
  color: #7c3aed;
}

@media (prefers-color-scheme: dark) {
  .dash-badge-ocup--ocupado { color: #a78bfa; }
}

/* ── Limpieza info ───────────────────────────────────────────── */
.dash-card-limpieza {
  font-size: 13px;
  min-height: 22px;
}

.dash-asignada {
  color: #16a34a;
  font-weight: 500;
}

.dash-sin-asignar {
  color: #d97706;
  font-weight: 600;
}

.dash-sin-tarea {
  color: var(--text);
  font-style: italic;
}

.dash-last-clean {
  font-size: 12px;
  color: var(--text);
}

/* ── Reserva próxima ─────────────────────────────────────────── */
.dash-card-reserva {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  font-size: 13px;
}

.dash-reserva-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text);
}

.dash-reserva-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dash-huesped {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-h);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-reserva-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dash-fecha {
  color: var(--text);
  font-size: 13px;
}

.dash-dias {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--code-bg);
  color: var(--text);
  white-space: nowrap;
}

.dash-dias--hoy {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

.dash-dias--urgente {
  background: rgba(234, 88, 12, 0.12);
  color: #ea580c;
}

.dash-dias--proximo {
  background: rgba(217, 119, 6, 0.12);
  color: #d97706;
}

.dash-sin-reserva {
  color: var(--text);
  font-style: italic;
  font-size: 12px;
}

/* ── Dark mode ───────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .dash-card--listo     { background: rgba(21,  128, 61,  0.1); border-color: rgba(21,  128, 61,  0.3); }
  .dash-card--sucio     { background: rgba(220, 38,  38,  0.1); border-color: rgba(220, 38,  38,  0.3); }
  .dash-card--repaso    { background: rgba(217, 119, 6,   0.1); border-color: rgba(217, 119, 6,   0.3); }
  .dash-card--limpiando { background: rgba(37,  99,  235, 0.1); border-color: rgba(37,  99,  235, 0.3); }

  .dash-contador--listo  { background: rgba(21,  128, 61,  0.1); border-color: rgba(21,  128, 61,  0.3); }
  .dash-contador--sucio  { background: rgba(220, 38,  38,  0.1); border-color: rgba(220, 38,  38,  0.3); }
  .dash-contador--repaso { background: rgba(217, 119, 6,   0.1); border-color: rgba(217, 119, 6,   0.3); }
  .dash-contador--sin    { background: rgba(100, 116, 139, 0.1); border-color: rgba(100, 116, 139, 0.3); }

  .dash-asignada    { color: #4ade80; }
  .dash-sin-asignar { color: #fbbf24; }

  .dash-dias--hoy     { background: rgba(220, 38, 38, 0.2);  color: #f87171; }
  .dash-dias--urgente { background: rgba(234, 88, 12, 0.2);  color: #fb923c; }
  .dash-dias--proximo { background: rgba(217, 119, 6, 0.2);  color: #fbbf24; }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dash-header              { padding: 12px 16px; }
  .dash-resumen-titulo      { padding: 0 12px; font-size: 9px; }
  .dash-contador            { padding: 12px 0; }
  .dash-contador-num        { font-size: 22px; }
  .dash-contador-label      { font-size: 10px; }
  .dash-grid    { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); padding: 16px; gap: 10px; }
  .dash-sub     { display: none; }
  .dash-nav-btn { padding: 6px 12px; }
}

@media (max-width: 480px) {
  .dash-resumen-divider { display: none; }
  .dash-resumen-grupo   { flex: none; width: 100%; }
  .dash-grid    { grid-template-columns: 1fr 1fr; }
  .dash-contador-num { font-size: 20px; }
}

/* ── Alertas Airbnb ──────────────────────────────────────────── */
.dash-alertas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 32px 0;
}

.dash-alerta-airbnb {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: #fefce8;
  border: 1px solid #fde047;
  border-left: 4px solid #eab308;
  border-radius: 10px;
  font-size: 14px;
}

.dash-alerta-icono {
  flex-shrink: 0;
  font-size: 16px;
}

.dash-alerta-texto {
  flex: 1;
  color: #713f12;
  line-height: 1.4;
}

.dash-alerta-texto strong {
  font-weight: 700;
}

.dash-alerta-btn {
  flex-shrink: 0;
  padding: 6px 14px;
  background: #eab308;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.dash-alerta-btn:hover {
  background: #ca8a04;
}

.dash-alerta-btn--outline {
  background: transparent;
  color: #92400e;
  border: 1px solid #d97706;
}

.dash-alerta-btn--outline:hover {
  background: rgba(217, 119, 6, 0.1);
}

.dash-alerta-ok {
  padding: 10px 16px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-left: 4px solid #16a34a;
  border-radius: 10px;
  font-size: 14px;
  color: #166534;
  font-weight: 500;
}

@media (prefers-color-scheme: dark) {
  .dash-alerta-airbnb {
    background: rgba(234, 179, 8, 0.08);
    border-color: rgba(234, 179, 8, 0.35);
    border-left-color: #eab308;
  }
  .dash-alerta-texto { color: #fef08a; }
  .dash-alerta-btn--outline {
    color: #fde68a;
    border-color: #d97706;
  }
  .dash-alerta-btn--outline:hover { background: rgba(217, 119, 6, 0.15); }
  .dash-alerta-ok {
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(134, 239, 172, 0.3);
    border-left-color: #4ade80;
    color: #4ade80;
  }
}

@media (max-width: 600px) {
  .dash-alertas { padding: 12px 16px 0; }
  .dash-alerta-airbnb { flex-wrap: wrap; gap: 8px; }
  .dash-alerta-btn { width: 100%; text-align: center; }
}
/* ── Layout ──────────────────────────────────────────────────── */
.login {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── Brand ───────────────────────────────────────────────────── */
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.login-titulo {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-h);
  letter-spacing: -0.4px;
}

.login-sub {
  font-size: 13px;
  color: var(--text);
}

/* ── Form ────────────────────────────────────────────────────── */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-h);
}

.login-input {
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-h);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.login-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.login-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Error ───────────────────────────────────────────────────── */
.login-error {
  padding: 10px 12px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: 8px;
  font-size: 13px;
  color: #dc2626;
  margin: 0;
}

/* ── Button ──────────────────────────────────────────────────── */
.login-btn {
  padding: 11px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s;
  margin-top: 4px;
  width: 100%;
}

.login-btn:hover:not(:disabled) { opacity: 0.88; }
.login-btn:disabled              { opacity: 0.55; cursor: not-allowed; }

/* ── Loading ─────────────────────────────────────────────────── */
.auth-cargando {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.auth-cargando p {
  font-size: 14px;
  color: var(--text);
}

/* ── Dark mode ───────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .login-error { background: rgba(220, 38, 38, 0.12); color: #f87171; border-color: rgba(239,68,68,0.3); }
}
/* ── Layout principal ───────────────────────────────────────── */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  text-align: left;
}

/* ── Header ─────────────────────────────────────────────────── */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 40px;
  border-bottom: 1px solid var(--border);
}

.site-header-brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.site-header-titulo {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-h);
  letter-spacing: -0.3px;
}

.site-header-sub {
  font-size: 13px;
  color: var(--text);
}

.site-header-panel-btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: none;
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.site-header-panel-btn:hover {
  background: var(--code-bg);
  color: var(--text-h);
}

.site-header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-header-usuario {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.site-header-logout-btn {
  border-color: transparent;
  opacity: 0.7;
}

.site-header-logout-btn:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
  opacity: 1;
}

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
  padding: 56px 40px 48px;
  background: linear-gradient(135deg, var(--accent-bg) 0%, transparent 60%);
  border-bottom: 1px solid var(--border);
}

.hero-titulo {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -1.5px;
  line-height: 1.1;
  color: var(--text-h);
  margin: 0 0 12px;
}

.hero-sub {
  font-size: 18px;
  color: var(--text);
  margin: 0;
}

/* ── Main ────────────────────────────────────────────────────── */
.main {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ── Formulario de búsqueda ─────────────────────────────────── */
.search-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px;
  box-shadow: var(--shadow);
}

.search-titulo {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-h);
  margin: 0 0 28px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 20px;
  align-items: end;
  margin-bottom: 28px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-h);
  letter-spacing: 0.1px;
}

.form-group input[type="date"],
.form-group select {
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text-h);
  font-size: 17px;
  font-family: var(--sans);
  outline: none;
  transition: border-color 0.15s;
  appearance: auto;
}

.form-group input[type="date"]:focus,
.form-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.form-group--checkbox {
  justify-content: flex-end;
  padding-bottom: 2px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 15px;
  color: var(--text-h);
  padding: 10px 0;
  white-space: nowrap;
}

.checkbox-label input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ── Botones ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-family: var(--sans);
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s, box-shadow 0.15s;
}

.form-acciones {
  display: flex;
  gap: 10px;
}

.btn--buscar {
  background: var(--accent);
  color: #fff;
  flex: 1;
  justify-content: center;
  padding: 15px 28px;
  font-size: 17px;
}

.btn--limpiar {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.btn--limpiar:hover {
  background: var(--code-bg);
  color: var(--text-h);
}

.btn--buscar:hover:not(:disabled) {
  opacity: 0.88;
  box-shadow: 0 4px 12px var(--accent-bg);
}

.btn--buscar:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn--propuesta {
  background: var(--accent);
  color: #fff;
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.btn--propuesta:hover {
  opacity: 0.88;
}

.btn--secundario {
  background: transparent;
  color: var(--text-h);
  border: 1px solid var(--border);
}

.btn--secundario:hover {
  background: var(--code-bg);
}

/* ── Spinner ─────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar 0.65s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

/* ── Alerta ──────────────────────────────────────────────────── */
.alerta {
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 15px;
}

.alerta--error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

@media (prefers-color-scheme: dark) {
  .alerta--error {
    background: rgba(153,27,27,0.15);
    color: #fca5a5;
    border-color: rgba(153,27,27,0.3);
  }
}

/* ── Estado de carga ─────────────────────────────────────────── */
.estado-cargando {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px;
  color: var(--text);
}

.dots {
  display: flex;
  gap: 6px;
}

.dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulso 1.2s ease-in-out infinite;
}

.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes pulso {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* ── Resultados ──────────────────────────────────────────────── */
.resultados-encabezado {
  margin-bottom: 24px;
}

.resultados-titulo {
  font-size: 22px;
  font-weight: 500;
  color: var(--text-h);
  margin: 0 0 4px;
}

.resultados-resumen {
  font-size: 14px;
  color: var(--text);
  margin: 0;
}

/* ── Estado vacío ────────────────────────────────────────────── */
.estado-vacio {
  padding: 56px 24px;
  text-align: center;
  color: var(--text);
  border: 1px dashed var(--border);
  border-radius: 12px;
}

.estado-vacio-sub {
  font-size: 14px;
  margin-top: 4px;
}

/* ── Grid de cards ───────────────────────────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

/* ── Card ────────────────────────────────────────────────────── */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
}

.card:hover {
  box-shadow: var(--shadow);
}

.card-encabezado {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 24px 16px;
}

.card-nombre {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-h);
  margin: 0 0 6px;
  letter-spacing: -0.2px;
}

.card-descripcion {
  font-size: 14px;
  color: var(--text);
  margin: 0;
  line-height: 1.5;
}

.card-ubicacion {
  font-size: 13px;
  color: var(--text);
  margin: 4px 0 0;
  opacity: 0.75;
}

.propuesta-ubicacion {
  font-size: 14px;
  color: var(--text);
  margin: 0 0 20px;
  opacity: 0.8;
}

/* ── Badge de precio ─────────────────────────────────────────── */
.precio-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.precio-badge-valor {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-h);
  letter-spacing: -0.5px;
  line-height: 1;
}

.precio-badge-label {
  font-size: 11px;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* ── Amenities ───────────────────────────────────────────────── */
.amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 24px 16px;
}

.amenity-tag {
  font-size: 12px;
  padding: 4px 10px;
  background: var(--code-bg);
  color: var(--text);
  border-radius: 20px;
  border: 1px solid var(--border);
}

/* ── Desglose de precio ──────────────────────────────────────── */
.precio-detalle {
  margin: 0 24px 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.precio-detalle-titulo {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text);
  padding: 10px 14px 8px;
  background: var(--code-bg);
  margin: 0;
  border-bottom: 1px solid var(--border);
}

.precio-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.precio-fila:last-child {
  border-bottom: none;
}

.precio-fila--subtotal {
  font-weight: 500;
  color: var(--text-h);
  background: var(--code-bg);
}

.precio-fila--total {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-h);
  background: var(--accent-bg);
}

/* Desglose en modal (sin margen lateral) */
.precio-detalle--modal {
  margin: 0 0 20px;
}

/* ── Selección de card ───────────────────────────────────────── */
.card--seleccionada {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-bg), var(--shadow);
}

.card-seleccion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background 0.15s;
}

.card-seleccion:hover {
  background: var(--code-bg);
}

.card--seleccionada .card-seleccion {
  background: var(--accent-bg);
  color: var(--accent);
  border-bottom-color: var(--accent-border);
}

.card-seleccion input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Botón flotante ──────────────────────────────────────────── */
.boton-flotante-wrap {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
}

.boton-flotante {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 14px 28px;
  font-size: 15px;
  font-family: var(--sans);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  transition: opacity 0.15s, transform 0.15s;
  white-space: nowrap;
}

.boton-flotante:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.boton-flotante:active {
  transform: translateY(0);
}

/* ── Botón propuesta (dentro de card) ───────────────────────── */
.card .btn--propuesta {
  margin: 0 24px 24px;
  width: calc(100% - 48px);
}

/* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 90svh;
  overflow-y: auto;
  position: relative;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.2),
    0 4px 16px rgba(0,0,0,0.1);
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--code-bg);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 16px;
  cursor: pointer;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.modal-close:hover {
  background: var(--border);
}

/* ── Propuesta (contenido del modal) ────────────────────────── */
.propuesta {
  padding: 32px;
}

.propuesta-etiqueta {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent);
  margin: 0 0 8px;
}

.propuesta-nombre {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-h);
  letter-spacing: -0.5px;
  margin: 0 0 6px;
}

.propuesta-desc {
  font-size: 14px;
  color: var(--text);
  margin: 0 0 24px;
  line-height: 1.5;
}

.propuesta-fechas {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.propuesta-fecha-bloque {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.propuesta-fecha-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text);
}

.propuesta-fecha-bloque strong {
  font-size: 17px;
  color: var(--text-h);
  font-weight: 600;
}

.propuesta-sep {
  font-size: 13px;
  color: var(--text);
  text-align: center;
  padding: 0 4px;
  white-space: nowrap;
}

.propuesta-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.tag {
  font-size: 13px;
  padding: 4px 12px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
}

.tag--mascota {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-bg);
}

.propuesta-validez {
  font-size: 13px;
  color: var(--text);
  margin: 0 0 24px;
  font-style: italic;
}

.propuesta-acciones {
  display: flex;
  gap: 10px;
}

.propuesta-acciones .btn {
  flex: 1;
  justify-content: center;
}

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer {
  padding: 20px 40px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}

.site-footer p {
  margin: 0;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .site-header { padding: 14px 20px; }
  .site-header-brand { flex-direction: column; gap: 2px; align-items: flex-start; }
  .hero { padding: 36px 20px 32px; }
  .hero-titulo { font-size: 32px; }
  .main { padding: 24px 20px; gap: 28px; }
  .search-card { padding: 24px 20px; }
  .search-titulo { font-size: 24px; margin-bottom: 22px; }
  .form-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .form-group label { font-size: 14px; }
  .form-group input[type="date"],
  .form-group select { font-size: 16px; padding: 12px 13px; }
  .form-group--checkbox { grid-column: 1 / -1; }
  .cards-grid { grid-template-columns: 1fr; }
  .card-encabezado { flex-direction: column; gap: 12px; }
  .precio-badge { align-items: flex-start; }
  .propuesta { padding: 24px 20px; }
  .propuesta-fechas { flex-direction: column; gap: 8px; }
  .propuesta-sep { display: none; }
  .site-footer { padding: 16px 20px; }
}

@media (max-width: 480px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-group input[type="date"],
  .form-group select { font-size: 17px; padding: 14px; }
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  .modal-overlay {
    position: static;
    background: none;
    backdrop-filter: none;
    padding: 0;
  }
  .modal {
    box-shadow: none;
    border: none;
    max-height: none;
  }
  .modal-close,
  .propuesta-acciones { display: none; }
}