/* ===== Estructura de pantalla: encabezado + panel izquierdo, derecho e inferior ===== */
html, body { height: 100%; overflow: hidden; }
.shell {
  display: grid;
  height: 100vh; height: 100dvh;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "top top top" "sub sub sub" "left main right" "bottom bottom bottom";
}
.logged-out .shell { visibility: hidden; }
.legacy-hidden { display: none !important; }

/* ---------- Encabezado ---------- */
.topbar { grid-area: top; background: var(--deep); color: #effff8; box-shadow: 0 6px 20px rgba(10,38,45,.18); z-index: 20; }
.tb-row { display: flex; align-items: center; gap: 18px; padding: 10px 18px 6px; }
.tb-brand { display: flex; gap: 12px; align-items: center; min-width: 0; flex: 1; }
.tb-brand .brand-mark { width: 34px; height: 34px; flex: none; box-shadow: 0 0 0 5px rgba(32,220,137,.12); }
.tb-brand .brand-mark:after { width: 22px; top: 16px; left: 6px; }
.tb-titles { min-width: 0; }
.tb-app { display: block; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: #9ff0c9; font-weight: 800; }
.topbar #mapTitle { margin: 1px 0 0; font-size: 1.1rem; letter-spacing: -.02em; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-sub { display: flex; gap: 4px 14px; align-items: baseline; flex-wrap: wrap; }
.tb-sub p { margin: 2px 0 0 !important; font-size: .72rem !important; color: #b9d2cb; }
.tb-sub p[hidden] { display: none !important; }
.topbar .week-badge b { color: #9ff0c9; }
.topbar .week-badge span { color: #b9d2cb; }
.topbar .sync-status span { color: #b9d2cb; }
.topbar .sync-status[data-state="offline"] span { color: #ffb4a8; }

.tb-levels { display: flex; gap: 4px; flex: none; background: rgba(255,255,255,.08); padding: 4px; border-radius: 12px; }
.tb-levels .level-btn { flex: none; padding: 7px 12px; border: 0; border-radius: 9px; background: transparent; color: #d4e7e1; text-align: center; }
.tb-levels .level-btn span { display: none; }
.tb-levels .level-btn strong { font-size: .82rem; }
.tb-levels .level-btn.active { background: var(--mint); color: var(--deep); }

.tb-right { display: flex; align-items: center; gap: 14px; flex: none; }
.mode-indicator { padding: 5px 11px; border-radius: 99px; background: rgba(255,255,255,.12); font-size: .72rem; font-weight: 800; color: #dff8f0; white-space: nowrap; }
.mode-indicator[data-mode="edit"] { background: #2f80ed; color: white; }
.mode-indicator[data-mode="plan"] { background: #7b61ff; color: white; }
.mode-indicator[data-mode="carga"] { background: #f5a700; color: #2b1d00; }
.mode-indicator[data-mode="admin"] { background: #e5484d; color: white; }
.mode-indicator[data-mode="polygons"] { background: #00a3a3; color: white; }
.topbar .compliance-metric { width: auto; flex: none; display: flex; align-items: center; gap: 8px; }
.topbar .compliance-box { width: 42px; height: 42px; border-color: rgba(255,255,255,.4); }
.topbar .compliance-value { font-size: .76rem; }
.topbar .compliance-label { color: #b9d2cb; font-size: .6rem; max-width: 72px; text-align: left; }

.user-menu { position: relative; }
.avatar { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: var(--mint); color: var(--deep); font-weight: 900; font-size: .86rem; cursor: pointer; }
.avatar:hover, .avatar[aria-expanded="true"] { box-shadow: 0 0 0 4px rgba(32,220,137,.3); }
.user-dropdown { position: absolute; right: 0; top: calc(100% + 10px); min-width: 250px; display: grid; background: white; color: var(--ink); border-radius: 14px; box-shadow: 0 18px 50px rgba(3,32,38,.3); padding: 8px; z-index: 40; }
.user-dropdown[hidden] { display: none; }
.ud-head { padding: 10px 12px 12px; border-bottom: 1px solid #e3ece9; display: grid; gap: 2px; }
.ud-head b { font-size: .95rem; }
.ud-head small { color: #587078; font-size: .74rem; }
.ud-head small:empty { display: none; }
.ud-items { display: grid; padding: 6px 0; border-bottom: 1px solid #e3ece9; }
.ud-item { display: flex; justify-content: space-between; align-items: center; text-align: left; border: 0; background: none; padding: 9px 12px; border-radius: 9px; font: inherit; font-size: .86rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.ud-item:hover, .ud-item:focus-visible { background: #eaf2ef; outline: none; }
.ud-item.current { color: #0f6b4b; }
.ud-check { color: var(--mint); font-size: .7rem; }
.ud-exit { color: #b4232a; margin-top: 4px; }

.tb-tabs { display: flex; gap: 4px; padding: 0 18px; }
.tab { border: 0; background: transparent; color: #b9d2cb; font-weight: 800; font-size: .84rem; padding: 8px 14px 10px; border-bottom: 3px solid transparent; cursor: pointer; }
.tab:hover { color: white; }
.tab.active { color: white; border-bottom-color: var(--mint); }

/* ---------- Paneles ---------- */
.shell > aside { display: none !important; min-height: 0; overflow-y: auto; }
body.left-open .panel-left, body.right-open .panel-right { display: flex !important; }
.panel-left { grid-area: left; width: 380px; }
.panel-right { grid-area: right; width: 360px; box-shadow: -10px 0 30px rgba(10,38,45,.12); }
.panel-bottom { grid-area: bottom; display: none; height: 32vh; min-height: 180px; background: var(--deep); color: #effff8; padding: 12px 18px 14px; overflow: auto; box-shadow: 0 -10px 30px rgba(10,38,45,.14); z-index: 4; }
body.bottom-open .panel-bottom { display: block; }
.panel-head, .bottom-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.panel-head h3, .bottom-head h3 { margin: 0; font-size: 1rem; }
.panel-close { border: 1px solid rgba(255,255,255,.25); background: transparent; color: #dff8f0; width: 30px; height: 30px; border-radius: 8px; font-size: 1.1rem; line-height: 1; cursor: pointer; flex: none; }
.panel-close:hover { border-color: var(--mint); }
.panel-section { display: grid; gap: 14px; }
.panel-section[hidden] { display: none; }
.panel-help { margin: 0; font-size: .76rem; color: #b9d2cb; line-height: 1.4; }
.danger-button { border: 1px solid rgba(255,120,110,.55); background: transparent; color: #ffb4a8; border-radius: 10px; padding: 10px; font-weight: 800; cursor: pointer; }
.danger-button[hidden] { display: none; }
.danger-button:hover { background: rgba(229,72,77,.15); }

/* ---------- Área del plano ---------- */
.stage { grid-area: main; padding: 14px !important; min-height: 0; display: flex; flex-direction: column; }
.stage .map-shell { flex: 1; min-height: 0 !important; }
.map-toolbar { position: absolute; left: 14px; top: 14px; z-index: 8; display: none; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 12px; background: rgba(13,41,51,.92); color: white; font-size: .8rem; font-weight: 700; box-shadow: 0 8px 22px rgba(13,41,51,.25); max-width: calc(100% - 28px); }
.map-toolbar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-toolbar button { flex: none; border: 0; border-radius: 9px; padding: 8px 12px; background: var(--mint); color: var(--deep); font-weight: 900; cursor: pointer; }
.map-toolbar button[hidden] { display: none; }
.appmode-edit.appview-program #editToolbar { display: flex; }
.appview-site #siteToolbar { display: flex; }
.appmode-edit:not(.left-open) .add-hint { display: none !important; }
.appmode-edit .map-shell { outline: 3px solid #2f80ed; outline-offset: -3px; }
.appmode-polygons .map-shell { outline: 3px solid #00a3a3; outline-offset: -3px; }
.appmode-polygons .map-wrap { cursor: crosshair; }

/* Gestión de sitio: solo el plano (capa de actividades oculta) + polígonos */
.appview-site #markers, .appview-site #empty, .appview-site .add-hint, .appview-site .wizard-map-banner { display: none !important; }
.appview-program .poly-layer, .appview-program .poly-labels, .appview-program .poly-handles, .appview-program .poly-info { display: none !important; }
.poly-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.poly { stroke-width: 2; stroke-linejoin: round; }
.poly.selected { stroke-width: 3.5; }
.poly.editing { stroke-width: 3; stroke-dasharray: 7 4; }
.poly.drawing { stroke-width: 2.5; stroke-dasharray: 5 4; }
.poly-labels, .poly-handles { position: absolute; inset: 0; pointer-events: none; }
.poly-label { position: absolute; transform: translate(-50%, -50%); padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,.88); color: var(--ink); border: 1px solid var(--poly-color); font-size: .7rem; font-weight: 800; white-space: nowrap; }
.poly-handle { position: absolute; z-index: 3; width: 12px; height: 12px; transform: translate(-50%, -50%); border-radius: 50%; background: white; border: 2px solid var(--poly-color); pointer-events: auto; cursor: grab; touch-action: none; }
.poly-handle.first { width: 16px; height: 16px; }
.poly-handle.can-close { background: var(--poly-color); box-shadow: 0 0 0 5px rgba(255,255,255,.75), 0 0 0 7px var(--poly-color); cursor: pointer; }
.map-world.live-zoom .poly-handle, .map-world.live-zoom .poly-label { transform: translate(-50%, -50%) scale(var(--inverse-live-scale)); }
.poly-info { position: absolute; z-index: 9; width: 290px; background: var(--deep); color: white; border-radius: 12px; padding: 12px 14px; box-shadow: 0 14px 34px rgba(3,32,38,.35); font-size: .82rem; }
.poly-info[hidden] { display: none; }
.poly-info-head { display: flex; gap: 8px; align-items: center; padding-right: 22px; }
.poly-info-head i { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.poly-info p { margin: 8px 0; color: #d7eeea; line-height: 1.4; white-space: pre-wrap; }
.poly-owners { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); }
.poly-owners div { display: grid; }
.poly-owners span { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: #9ff0c9; font-weight: 800; }
.poly-info small { display: block; margin-top: 8px; color: #9fc4ba; font-size: .7rem; }
.poly-info-close { position: absolute; right: 8px; top: 6px; border: 0; background: none; color: #b9d2cb; font-size: 1.2rem; cursor: pointer; }

/* Panel derecho: polígonos */
#polyPanel { display: grid; gap: 12px; }
.poly-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.poly-list li { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; background: rgba(255,255,255,.07); cursor: pointer; }
.poly-list li:hover { background: rgba(255,255,255,.12); }
.poly-list li i { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.poly-list li b { display: block; font-size: .84rem; }
.poly-list li small { color: #aad0c6; font-size: .72rem; }
.poly-list .empty-li { cursor: default; color: #b9d2cb; font-size: .8rem; }
.poly-step { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.poly-step span { font-size: .72rem; color: #9ff0c9; }
.poly-form { display: grid; gap: 12px; }
.poly-form input, .poly-form textarea, .poly-form select, .poly-color-row input { width: 100%; }
.poly-form input[type="range"] { accent-color: var(--mint); }
.poly-status { margin: 0; font-size: .74rem; color: #ffd27a; min-height: 1em; }
.poly-color-row { display: flex; align-items: center; gap: 10px; }
.poly-color-row input { width: 60px; }
.panel-right select, .panel-left select { color: var(--ink); }

/* Panel izquierdo: planificar */
.plan-menu { display: grid; gap: 12px; }
.plan-menu[hidden], .planning-list[hidden] { display: none; }
.menu-card { text-align: left; display: grid; gap: 4px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: white; border-radius: 12px; padding: 12px; cursor: pointer; font: inherit; }
.menu-card:hover { border-color: var(--mint); }
.menu-card span { font-size: .74rem; color: #b9d2cb; }
.planning-list { display: grid; gap: 12px; }
.plan-group { display: grid; gap: 6px; }
.plan-group-head { display: flex; justify-content: space-between; align-items: center; font-size: .84rem; }
.plan-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; max-height: 30vh; overflow: auto; }
.plan-group li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: rgba(255,255,255,.07); }
.plan-group li b { display: block; font-size: .8rem; }
.plan-group li small { color: #aad0c6; font-size: .7rem; }
.plan-action { flex: none; border: 1px solid rgba(32,220,137,.5); background: transparent; color: #9ff0c9; border-radius: 8px; padding: 5px 9px; font-weight: 800; font-size: .72rem; cursor: pointer; }
.wizard-mode .plan-menu, .wizard-mode .planning-list { display: none !important; }

/* Panel izquierdo: administrar */
.admin-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: rgba(255,255,255,.08); padding: 4px; border-radius: 12px; }
.admin-tab { border: 0; background: transparent; color: #d4e7e1; padding: 9px; border-radius: 9px; font-weight: 800; cursor: pointer; }
.admin-tab.active { background: var(--mint); color: var(--deep); }
.admin-accounts { display: grid; gap: 12px; }
.admin-accounts[hidden] { display: none; }
.admin-accounts .table-wrap { margin-top: 0; max-height: none; border-color: rgba(255,255,255,.14); }
.admin-accounts .user-table { color: #effff8; }
.admin-accounts .user-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; padding: 10px; border-bottom: 1px solid rgba(255,255,255,.1); }
.admin-accounts .user-table td { display: block; padding: 0; border: 0; }
.admin-accounts .user-table td:first-child { grid-column: 1 / -1; }
.admin-accounts .user-table small { color: #aad0c6; }
.admin-accounts .user-table select { width: 100%; padding: 6px; border-radius: 8px; }
.admin-accounts .link-button { color: #9ff0c9; }
.admin-accounts .new-user { grid-template-columns: 1fr 1fr; margin-top: 0; }
.admin-accounts .new-user input:first-child, .admin-accounts .new-user button { grid-column: 1 / -1; }
.admin-accounts .new-user input, .admin-accounts .new-user select { width: 100%; }
.admin-accounts .user-status { margin: 0; font-size: .78rem; color: #ffd27a; }

/* Panel inferior: actividades */
.panel-bottom .works { gap: 8px; }
.panel-bottom .works-head { display: flex; justify-content: space-between; align-items: center; }
.panel-bottom .works-head h2 { display: none; }
.panel-bottom #workList { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px; margin-top: 8px; }
.panel-bottom .work-row { cursor: pointer; }
.panel-bottom .work-row:hover { background: rgba(255,255,255,.12); }

/* ---------- Pantallas angostas: los paneles se superponen ---------- */
@media (max-width: 900px) {
  .tb-row { flex-wrap: wrap; gap: 8px 12px; }
  .tb-brand { flex-basis: 100%; }
  .topbar .compliance-label, .mode-indicator { display: none; }
  body.left-open .panel-left, body.right-open .panel-right { position: fixed; left: 0; right: 0; bottom: 0; top: 150px; width: auto; z-index: 30; }
  .panel-bottom { height: 40vh; }
}

#manageUsers { display: none !important; }

/* v2.1 — dueños provisorios y sustracción de polígonos */
.owner-field { display: grid; gap: 4px; }
.owner-hint { font-size: .7rem; color: #aad0c6; }
.owner-hint.official { color: #9ff0c9; }
.owner-hint.provisional { color: #ffd27a; }
.provisional-tag { font-style: normal; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 999px; background: #ffd27a; color: #3b2a00; vertical-align: 1px; margin-left: 4px; }
.hole-tag { color: #9ff0c9; font-weight: 400; }
.hole-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .78rem; color: #d7eeea; }
.poly-handle.hole { width: 10px; height: 10px; border-style: dashed; }
.sub-button { width: 100%; }
.sub-chip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.08); font-size: .84rem; }
.sub-chip i { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.sub-chip span { font-weight: 900; font-size: .7rem; padding: 1px 7px; border-radius: 999px; background: #00a3a3; color: white; }
.sub-summary p { margin: 0 0 8px; font-size: .8rem; line-height: 1.45; color: #d7eeea; }
.sub-summary .sub-warn { color: #ffd27a; }
.sub-actions { flex-wrap: wrap; }
.poly.sub-pickable { opacity: .8; }
.poly.sub-a { stroke-width: 4; stroke-dasharray: 8 4; }
.poly.sub-original { stroke-width: 1.5; stroke-dasharray: 3 4; }
.poly.sub-cut { stroke-width: 2.5; stroke-dasharray: 9 5; }
.poly.sub-result { stroke-width: 3.5; }
.poly-label.sub-tag { font-size: .74rem; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.poly-label.sub-tag.cut { background: rgba(255,255,255,.7); font-style: italic; }

/* v2.2 — ficha fija de actividad con pestañas (cerrar / editar) */
.card.pinned { pointer-events: auto; cursor: default; }
.card-tabs { display: none; position: absolute; left: 100%; top: 14px; flex-direction: column; gap: 6px; }
.card.pinned .card-tabs { display: flex; }
.card-tab { width: 36px; height: 36px; margin-left: -2px; display: grid; place-items: center; border: 0; border-radius: 0 10px 10px 0; background: var(--deep); color: white; font-size: 1.35rem; line-height: 1; font-weight: 700; cursor: pointer; box-shadow: 6px 6px 16px rgba(3,32,38,.25); pointer-events: auto; }
.card-tab:hover, .card-tab:focus-visible { background: #17404c; color: var(--mint); outline: none; }
.card-tab svg { width: 18px; height: 18px; }
.card-edit { display: none; }
.card.editable .card-edit { display: grid; }
.card.pinned.card-left { transform: translate(calc(-100% - 59px + var(--shift-x)), calc(-50% + var(--shift-y))); }
.card.pinned.card-left:after { display: none; }

/* v3.1 — encabezado simple en Gestión de sitio (el estado de conexión solo aparece si se pierde) */
.appview-site .compliance-metric { display: none !important; }
.appview-site .tb-sub > p:not(.sync-status) { display: none !important; }
.appview-site .tb-sub .sync-status:not([data-state="offline"]) { display: none !important; }
/* v3.1 — dueños de área múltiples */
.owner-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.owner-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border-radius: 999px; background: rgba(32,220,137,.16); color: #effff8; font-size: .78rem; font-weight: 700; }
.owner-chip.prov { background: rgba(255,210,122,.14); }
.owner-chip button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; line-height: 1; }
.owner-chip button:hover { background: rgba(229,72,77,.6); }
.owner-none { font-size: .76rem; color: #9fc4ba; }
.owner-add { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.owner-add .cancel-edit { padding: 8px 12px; }
.owner-select { width: 100%; margin-bottom: 6px; padding: 9px 10px; border-radius: 10px; font-weight: 600; color: var(--ink); }
.owner-select:disabled { opacity: .6; }
.owner-empty { margin: 0 0 6px; font-size: .74rem; color: #ffd27a; line-height: 1.35; }