/* ==========================================================================
   base.css — Layout general de la app (shell)
   Sidebar blanco colapsable (con el logo arriba) + área de contenido.
   Color de marca de la inmobiliaria: #42695A
   ========================================================================== */

:root {
  /* Marca */
  --brand:            #42695A;
  --brand-dark:       #375546;
  --brand-tint:       #eef3f1;

  /* Neutros */
  --bg:               #f6f7fb;
  --surface:          #ffffff;
  --border:           #e5e8ef;
  --text:             #1f2937;
  --text-soft:        #6b7280;

  /* Medidas del shell */
  --sidebar-w:        240px;
  --sidebar-w-min:    76px;

  --radius:           12px;
  --transition:       .18s ease;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Sensación de aplicación (no de documento): por defecto el texto de la
   interfaz NO se selecciona ni muestra cursor de texto, así nada "parece
   editable". Los campos de formulario sí permiten escribir y seleccionar con
   normalidad. Si algún dato debe poder copiarse, se marca con .seleccionable. */
body {
  -webkit-user-select: none;
  user-select: none;
}
input,
textarea,
select,
[contenteditable="true"],
.seleccionable {
  -webkit-user-select: text;
  user-select: text;
}

/* Los elementos clickeables muestran cursor de mano. */
button,
.btn,
[hx-get],
[role="button"],
.sidebar__link,
.kcard {
  cursor: pointer;
}

/* ==========================================================================
   Sidebar (blanco, fijo, colapsable)
   ========================================================================== */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: width var(--transition);
  z-index: 20;
}

/* ---- Encabezado con logo + botón colapsar ---- */
.sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  min-height: 76px;
  border-bottom: 1px solid var(--border);
}
.sidebar__brand {
  display: flex;
  align-items: center;
  min-width: 0;
  text-decoration: none;
}
.sidebar__logo-img {
  /* height = tamaño de la CAJA (afecta el layout y la posición de la hamburguesa).
     NO lo subas para agrandar el logo. */
  height: 48px;
  width: auto;
  display: block;
  /* scale = agranda el logo SOLO visualmente, sin cambiar su caja, así la
     hamburguesa NO se mueve. 👉 Para más grande/chico cambia SOLO este número. */
  transform: scale(3.5);
  transform-origin: left center;
}
.sidebar__collapse {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.sidebar__collapse:hover { background: var(--brand-tint); color: var(--brand); }

/* ---- Navegación ---- */
.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar__nav::-webkit-scrollbar { width: 6px; }
.sidebar__nav::-webkit-scrollbar-thumb { background: #e2e5ef; border-radius: 999px; }

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.sidebar__link:hover { background: #f3f4f6; color: var(--text); }
.sidebar__link.is-active {
  background: var(--brand-tint);
  color: var(--brand);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand);
}

.sidebar__icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar__icon svg { width: 20px; height: 20px; }

.sidebar__label { transition: opacity var(--transition); }

.sidebar__link[data-disabled] { opacity: .45; cursor: not-allowed; }
.sidebar__link[data-disabled]:hover { background: transparent; color: var(--text-soft); }

.sidebar__badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  background: var(--brand-tint);
  color: var(--brand);
  padding: 2px 6px;
  border-radius: 999px;
}

/* ---- Pie del sidebar (cerrar sesión) ---- */
.sidebar__footer {
  padding: 10px;
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   Contenido
   ========================================================================== */
.contenido {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  padding: 24px;
  transition: margin-left var(--transition);
  min-width: 0; /* permite scroll horizontal interno (ej. Kanban) sin desbordar */
}

/* ==========================================================================
   Estado colapsado (hamburguesa): solo íconos, más espacio para la vista
   ========================================================================== */
body.is-collapsed .sidebar { width: var(--sidebar-w-min); }
body.is-collapsed .sidebar__header { justify-content: center; }
body.is-collapsed .sidebar__brand { display: none; }
/* display:none (no opacity) para que las etiquetas NO ocupen espacio y el
   ícono quede realmente centrado. */
body.is-collapsed .sidebar__label,
body.is-collapsed .sidebar__badge { display: none; }
body.is-collapsed .sidebar__link { justify-content: center; gap: 0; }
body.is-collapsed .contenido { margin-left: var(--sidebar-w-min); }

/* ==========================================================================
   Encabezado de página (reutilizable por cada vista)
   ========================================================================== */
.page-head { margin-bottom: 18px; }
.page-head__title { margin: 0; font-size: 20px; font-weight: 800; color: #111827; }
.page-head__subtitle { margin: 4px 0 0; font-size: 13px; color: var(--text-soft); }

/* ==========================================================================
   Responsive: en pantallas chicas el sidebar arranca colapsado
   ========================================================================== */
@media (max-width: 768px) {
  .contenido { margin-left: var(--sidebar-w-min); }
  .sidebar { width: var(--sidebar-w-min); }
  .sidebar__brand { display: none; }
  .sidebar__header { justify-content: center; }
  .sidebar__link { justify-content: center; gap: 0; }
  .sidebar__label, .sidebar__badge { display: none; }

  body.is-collapsed .sidebar { width: var(--sidebar-w); }
  body.is-collapsed .sidebar__brand { display: flex; }
  body.is-collapsed .sidebar__header { justify-content: space-between; }
  body.is-collapsed .sidebar__link { justify-content: flex-start; gap: 12px; }
  body.is-collapsed .sidebar__label, body.is-collapsed .sidebar__badge { display: inline; }
  body.is-collapsed .contenido { margin-left: var(--sidebar-w); }
}