:root {
  --sidebar-w: 248px;
  --brand: #2f4858;
  --st-free: #2e9d5b;
  --st-granted: #3d7fd6;
  --st-occupied: #e0a030;
  --st-full: #b4472f;
  --st-out: #9aa3ad;
}

body { background: #f4f6f8; }

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--brand);
  color: #fff;
  padding: 1rem .75rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar .brand {
  display: flex; gap: .5rem; align-items: center;
  color: #fff; text-decoration: none; font-weight: 600;
  padding: .25rem .5rem 1rem; line-height: 1.2;
}
.sidebar .brand i { font-size: 1.4rem; }
.sidebar .nav-link {
  color: rgba(255,255,255,.8); border-radius: .375rem;
  padding: .4rem .6rem; display: flex; gap: .55rem; align-items: center;
}
.sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.sidebar .nav-link.active { color: #fff; background: rgba(255,255,255,.16); }
.sidebar .nav-heading {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: rgba(255,255,255,.5); padding: 1rem .6rem .25rem;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: .75rem;
  background: #fff; border-bottom: 1px solid #e3e7eb;
  padding: .6rem 1.25rem; position: sticky; top: 0; z-index: 20;
}
.content { padding: 1.5rem 1.25rem 3rem; }

.global-search { position: relative; flex: 1; max-width: 560px; }
.global-search > i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: #6c757d; }
.global-search input { padding-left: 2.2rem; }
.search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1px solid #dee2e6; border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 70vh; overflow-y: auto;
}
.search-results:empty { display: none; }
.search-results .group-title { font-size: .72rem; text-transform: uppercase; color: #6c757d; padding: .5rem .9rem .2rem; }
.search-results a { display: block; padding: .35rem .9rem; color: inherit; text-decoration: none; }
.search-results a:hover { background: #f1f4f7; }

.page-header { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1rem; }
.page-header h1 { font-size: 1.5rem; margin: 0; }
.page-header .actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

.card { border: 1px solid #e3e7eb; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.card-header { background: #fff; font-weight: 600; }
.table > :not(caption) > * > * { vertical-align: middle; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #5c6670; white-space: nowrap; }
.htmx-request.htmx-indicator, .htmx-request .htmx-indicator { opacity: 1; }
.htmx-indicator { opacity: 0; transition: opacity .2s; }
#results.htmx-request { opacity: .55; transition: opacity .2s; }

dl.data { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 0; }
dl.data dt { font-weight: 500; color: #5c6670; }
dl.data dd { margin: 0; }

/* Estats d'ocupació */
.st-free { --st: var(--st-free); }
.st-granted { --st: var(--st-granted); }
.st-occupied { --st: var(--st-occupied); }
.st-full { --st: var(--st-full); }
.st-out_of_service { --st: var(--st-out); }
.status-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; font-weight: 500; padding: .15rem .55rem; border-radius: 1rem;
  background: color-mix(in srgb, var(--st) 15%, #fff); color: color-mix(in srgb, var(--st) 75%, #000);
}
.status-badge::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--st); }
.stat-tile { border-left: 4px solid var(--st, var(--brand)); }
.stat-tile .value { font-size: 1.8rem; font-weight: 600; line-height: 1.1; }
.stat-tile .label { color: #5c6670; font-size: .85rem; }

/* Plano: estados y caducidades */
.exp-expired { --st: #b4472f; }
.exp-1y { --st: #e0a030; }
.exp-5y { --st: #d9c34a; }
.exp-ok { --st: #2e9d5b; }
.exp-perpetual { --st: #3d7fd6; }
.exp-none { --st: #c9cfd6; }

.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.map-layout > * { min-width: 0; }
#unit-panel { position: sticky; top: 76px; }
@media (max-width: 1100px) { .map-layout { grid-template-columns: 1fr; } }

.cemetery-map { height: 440px; background: #dfe3e6; }
.leaflet-tooltip.zone-label {
  background: rgba(255,255,255,.92); border: 0; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.35);
  padding: 2px 7px; text-align: center; line-height: 1.15; color: #1f2d36;
}
.leaflet-tooltip.zone-label::before { display: none; }
.leaflet-tooltip.zone-label strong { display: block; font-size: .95rem; }
.leaflet-tooltip.zone-label span { font-size: .68rem; color: #5c6670; }
.zone-legend { display: inline-flex; gap: .8rem; color: #5c6670; }
.zone-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.zone-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; opacity: .8; }
.zone-high { background: #2e9d5b; } .zone-mid { background: #e0a030; } .zone-none { background: #b4472f; }

.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; font-size: .82rem; color: #3d4852; }
.legend span { display: inline-flex; align-items: center; gap: .35rem; }
.legend i { width: 14px; height: 14px; border-radius: 3px; background: var(--st); display: inline-block; }
.legend .st-out_of_service i { background: repeating-linear-gradient(45deg, var(--st-out), var(--st-out) 3px, #c3c9cf 3px, #c3c9cf 6px); }

.facade-scroll { overflow-x: auto; padding-bottom: .5rem; }

/* Pared de nichos vista de frente */
.niche-wall { width: max-content; margin: 0 auto; }
.wall-cap {
  height: 14px; margin: 0 -10px; border-radius: 4px 4px 0 0;
  background: linear-gradient(#b7ab97, #9c907c); box-shadow: 0 2px 3px rgba(0,0,0,.18);
}
.wall-body {
  display: grid; grid-template-columns: 34px repeat(var(--cols), 50px); gap: 6px 5px;
  padding: 10px 12px 12px 6px;
  background: linear-gradient(180deg, #ece6da, #e2dacb); border-left: 1px solid #d3c9b6; border-right: 1px solid #d3c9b6;
}
.wall-ground { height: 10px; margin: 0 -18px; border-radius: 0 0 6px 6px; background: linear-gradient(#a1a8ae, #868e95); }
.axis { font-size: .68rem; color: #8a8072; display: flex; align-items: center; justify-content: center; }
.axis-title { font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: .6rem; }

/* Campo de tumbas y panteones en planta */
.plot-field {
  display: grid; grid-template-columns: 34px repeat(var(--cols), 64px); gap: 16px 8px; width: max-content; margin: 0 auto;
  padding: 14px; border-radius: 8px;
  background: radial-gradient(circle at 1px 1px, rgba(0,0,0,.06) 1px, transparent 1px) 0 0 / 6px 6px, #ebe5d8;
}

/* Unidad (nicho, columbario, tumba, panteón, osario) */
.cell {
  position: relative; border: 0; padding: 3px 4px; cursor: pointer;
  width: 50px; height: 38px; border-radius: 5px 5px 3px 3px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--st) 82%, #fff), var(--st));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), inset 0 -3px 0 rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.15);
  color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.35);
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  transition: transform .1s, box-shadow .1s;
}
.cell.exp-none, .cell.exp-5y { color: #2b3138; text-shadow: none; }
.cell .num { font-size: .72rem; font-weight: 700; line-height: 1; }
.cell .slots { display: flex; gap: 3px; align-self: flex-end; }
.cell .slots i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.85); }
.cell .slots i.taken { background: rgba(255,255,255,.95); }
.cell.exp-none .slots i, .cell.exp-5y .slots i { border-color: rgba(0,0,0,.45); }
.cell.exp-none .slots i.taken, .cell.exp-5y .slots i.taken { background: rgba(0,0,0,.55); }
.cell .slots-text { font-size: .62rem; align-self: flex-end; }
.cell:hover, .cell:focus-visible { transform: translateY(-2px) scale(1.06); outline: none; z-index: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--st), 0 4px 10px rgba(0,0,0,.25); }
.cell.selected { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1f2d36; }
.cell.highlight { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1f2d36; }
  50% { box-shadow: 0 0 0 2px #fff, 0 0 0 9px rgba(31,45,54,.35); }
}
.cell.st-out_of_service { background: repeating-linear-gradient(45deg, var(--st-out), var(--st-out) 4px, #c3c9cf 4px, #c3c9cf 8px); }
.cell-columbarium { width: 50px; height: 34px; border-radius: 4px; }
.cell-grave { width: 64px; height: 40px; border-radius: 3px; }
.cell-pantheon { width: 64px; height: 40px; border-radius: 10px 10px 3px 3px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 2px 3px rgba(0,0,0,.25); }
.cell-ossuary { width: 64px; height: 40px; border-radius: 20px; }
.cell-empty { width: 100%; height: 100%; min-height: 34px; border-radius: 4px; background: rgba(0,0,0,.04); }
.occupancy-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: #e9ecef; }
.occupancy-bar > div { background: var(--st); }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 .9rem 1.4rem; border-left: 2px solid #e3e7eb; margin-left: .4rem; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: .3rem; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.timeline li:last-child { border-left-color: transparent; }

.doc-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; border: 1px solid #dee2e6; }

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--brand); }
.login-card { width: 100%; max-width: 380px; }

@media (max-width: 991.98px) {
  .sidebar { position: fixed; z-index: 40; left: calc(-1 * var(--sidebar-w)); transition: left .2s; }
  .sidebar.open { left: 0; box-shadow: 0 0 40px rgba(0,0,0,.3); }
}

@media print {
  body { background: #fff; }
  .content { padding: 0; }
  .card { border: 0; box-shadow: none; }
}

/* Portal de entidades externas */
.portal-header { background: var(--brand); color: #fff; }

/* Plantillas de documentos */
.doc-editor { min-height: 420px; background: #fff; font-size: 1rem; }
.doc-editor .ql-editor { min-height: 420px; }
.doc-paper {
  background: #fff; max-width: 820px; margin: 0 auto; padding: 48px 56px 64px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06); border-radius: 4px; min-height: 600px;
}
.doc-letterhead { border-bottom: 1px solid #9aa3ad; padding-bottom: .6rem; margin-bottom: 1.6rem; }
.doc-body h1 { font-size: 1.5rem; font-weight: 700; }
.doc-body h2 { font-size: 1.25rem; font-weight: 700; }
.doc-body h3 { font-size: 1.1rem; font-weight: 700; }
.doc-body p { margin-bottom: .5rem; }
.doc-body .ql-align-center { text-align: center; }
.doc-body .ql-align-right { text-align: right; }
.doc-body .ql-align-justify { text-align: justify; }