:root{
    --bg:#0f2a21; --card:#f7f4ec; --ink:#1b211d; --mute:#5c675f; --line:#d8d3c4; --paper:#fffdf8;
    --accent:#0f3d2e; --gold:#c9962c; --gold-soft:#f1e3bd; --bad:#a3271f; --ok:#1d7a4f; --off:#8a8f88;
  }
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{ margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
  [hidden]{ display:none !important; }
  button{ font:inherit; cursor:pointer; border-radius:6px; }
  :focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

  /* ── acceso ── */
  .centro{ min-height:100%; display:grid; place-items:center; padding:24px 16px; }
  .tarjeta{ width:100%; max-width:380px; background:var(--card); border-radius:10px; padding:26px 24px; box-shadow:0 10px 40px rgba(0,0,0,.35); }
  h1{ font:600 1.25rem Georgia,"Times New Roman",serif; margin:0 0 4px; }
  .sub{ color:var(--mute); margin:0 0 18px; }
  label{ display:block; font-size:.8rem; color:var(--mute); margin:12px 0 4px; letter-spacing:.02em; }
  input, select, textarea{ width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:6px; font:inherit; background:#fff; color:var(--ink); }
  input[readonly]{ background:#efeadb; color:var(--mute); }
  .primario{ padding:9px 16px; border:1px solid var(--accent); background:var(--accent); color:#fff; }
  .primario:disabled{ opacity:.5; cursor:wait; }
  .secundario{ padding:9px 16px; border:1px solid var(--accent); background:#fff; color:var(--accent); }
  .secundario:disabled{ opacity:.5; cursor:not-allowed; }
  .peligro{ padding:7px 12px; border:1px solid var(--bad); background:#fff; color:var(--bad); }
  #form-login .primario{ width:100%; margin-top:16px; }
  .enlace{ background:none; border:0; padding:0; color:var(--accent); text-decoration:underline; font-size:.85rem; margin-top:12px; }
  .msg{ min-height:1.4em; margin:12px 0 0; font-size:.9rem; }
  .msg.bad{ color:var(--bad); } .msg.ok{ color:var(--ok); }

  /* ── panel ── */
  #vista-panel{ min-height:100%; background:var(--card); }
  .barra{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 18px; background:var(--accent); color:#fff; }
  .barra strong{ font:600 1rem Georgia,serif; }
  .barra span{ font-size:.85rem; opacity:.85; margin-left:6px; }
  .barra button{ border:1px solid rgba(255,255,255,.5); background:transparent; color:#fff; padding:6px 12px; }
  .contenido{ padding:22px 18px 60px; max-width:1000px; margin:0 auto; }
  .contenido h1{ margin-bottom:12px; }
  .herramientas{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin-bottom:12px; }
  .filtros{ display:flex; flex-wrap:wrap; gap:6px; }
  .filtros button{ padding:6px 12px; border:1px solid var(--line); background:var(--paper); color:var(--ink); }
  .filtros button[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:#fff; }
  #busqueda{ max-width:260px; }
  #resumen{ color:var(--mute); font-size:.85rem; margin:0 0 8px; }
  .tabla-wrap{ overflow-x:auto; background:var(--paper); border:1px solid var(--line); border-radius:8px; }
  table{ border-collapse:collapse; width:100%; min-width:520px; }
  th, td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); }
  th{ font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); font-weight:600; background:#f2eee2; position:sticky; top:0; }
  tbody tr{ cursor:pointer; }
  tbody tr:hover{ background:#f6f1e1; }
  tbody tr:last-child td{ border-bottom:0; }
  td.num{ font-variant-numeric:tabular-nums; font-weight:600; width:64px; }
  td.piso{ width:64px; color:var(--mute); }
  td.vacio .nom{ color:var(--off); font-style:italic; }
  .pill{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:.75rem; font-weight:600; }
  .pill.dest{ background:var(--gold-soft); color:#6b4a06; border:1px solid var(--gold); }
  .pill.disp{ background:#ecebe6; color:var(--off); }
  .luz{ margin-left:7px; color:var(--gold); font-size:.95rem; }   /* ✦ = luces prendidas */
  .aviso{ padding:10px 14px; border-radius:6px; background:#fbe9e7; color:var(--bad); margin:0 0 12px; }

  /* ── editor ── */
  dialog{ border:0; padding:0; border-radius:10px; width:min(560px, calc(100vw - 24px)); max-height:calc(100vh - 24px); box-shadow:0 20px 60px rgba(0,0,0,.45); background:var(--card); color:var(--ink); }
  dialog::backdrop{ background:rgba(8,20,15,.6); }
  #form-editor{ display:flex; flex-direction:column; max-height:calc(100vh - 24px); }
  .ed-cab{ padding:16px 20px 10px; border-bottom:1px solid var(--line); }
  .ed-cab h2{ font:600 1.15rem Georgia,serif; margin:0; }
  .ed-cab p{ margin:2px 0 0; color:var(--mute); font-size:.85rem; }
  .ed-cuerpo{ padding:6px 20px 14px; overflow-y:auto; }
  .ed-pie{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:flex-end; padding:12px 20px; border-top:1px solid var(--line); background:#f2eee2; border-radius:0 0 10px 10px; }
  .ed-pie .estado{ margin-right:auto; font-size:.85rem; }
  .ed-cuerpo label:first-child{ margin-top:8px; }
  .fila2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .interruptor{ display:flex; align-items:center; gap:10px; margin:14px 0 4px; font-size:.95rem; color:var(--ink); }
  .interruptor input{ width:auto; }
  .ayuda{ color:var(--mute); font-size:.8rem; margin:3px 0 0; }
  #fila-color{ margin-top:12px; display:grid; gap:8px; }
  .color-fila{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
  .color-fila input[type=color]{ width:58px; height:38px; padding:2px; border:1px solid var(--line); border-radius:6px; background:#fff; cursor:pointer; }
  .color-nombre{ font-size:.9rem; min-width:120px; }
  .color-valor{ font-family:ui-monospace,Consolas,monospace; font-size:.85rem; color:var(--mute); min-width:88px; }
  .autocompletar{ position:relative; }
  .sugerencias{
    position:absolute; top:100%; left:0; right:0; z-index:5; margin:4px 0 0; padding:0;
    list-style:none; background:#fff; border:1px solid var(--line); border-radius:6px;
    max-height:240px; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,.18);
  }
  .sugerencias li{ padding:9px 12px; min-height:44px; border-bottom:1px solid var(--line); font-size:.86rem; line-height:1.35; cursor:pointer; }
  .sugerencias li:last-child{ border-bottom:0; }
  .sugerencias li:hover{ background:#f6f1e1; }
  .sugerencias li strong{ display:block; font-weight:600; }
  .sugerencias li span{ color:var(--mute); font-size:.78rem; }
  .sugerencias li.aviso{ cursor:default; min-height:0; color:var(--mute); }
  .sugerencias li.aviso:hover{ background:#fff; }
  /* z-index:0 encierra las capas internas de Leaflet (que van en 400) dentro del mapa, para que
     no tapen la lista de sugerencias del campo de dirección */
  #mapa-direccion{ height:220px; margin-top:10px; border:1px solid var(--line); border-radius:6px; position:relative; z-index:0; background:#e9e4d5; }
  .mapa-acciones{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; }
  .prefijo{ position:relative; }
  .prefijo span{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--mute); }
  .prefijo input{ padding-left:26px; }
  .foto{ display:grid; grid-template-columns:120px 1fr; gap:14px; align-items:start; margin-top:6px; }
  .foto-marco{ width:120px; height:120px; border-radius:6px; border:1px solid var(--line); background:#e9e4d5 center/cover no-repeat; }
  .foto-botones{ display:flex; flex-wrap:wrap; gap:8px; }
  .foto-info{ font-size:.8rem; color:var(--mute); margin:6px 0 0; }
  .galeria{ display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px; margin-top:6px; }
  /* contain, no cover: la galería guarda la foto entera y la muestra tal cual */
  .galeria .thumb{ width:100%; aspect-ratio:1/1; border-radius:6px; border:1px solid var(--line); background:#e9e4d5 center/contain no-repeat; }
  .galeria .agregar{ width:100%; aspect-ratio:1/1; border:1px dashed var(--line); background:var(--paper); color:var(--mute); font-size:.8rem; padding:6px; line-height:1.3; }
  .galeria .agregar:disabled{ opacity:.5; cursor:wait; }
  .galeria .quitar{ width:100%; margin-top:6px; padding:6px 8px; border:1px solid var(--bad); background:#fff; color:var(--bad); font-size:.78rem; }
  .galeria-cuenta{ color:var(--mute); font-weight:400; text-transform:none; letter-spacing:0; }
  @media (max-width:520px){ .fila2{ grid-template-columns:1fr; } .foto{ grid-template-columns:96px 1fr; } .foto-marco{ width:96px; height:96px; } }
  /* bloque de arrendatario y suscripción: solo existe en mi panel, no en el del arrendatario */
  .contrato{ margin-top:18px; padding-top:14px; border-top:2px solid var(--line); }
  .contrato h3{ font:600 .95rem Georgia,serif; margin:0 0 2px; }
  .duraciones{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .duraciones button{ padding:8px 14px; border:1px solid var(--accent); background:#fff; color:var(--accent); font-size:.85rem; }
  .susc{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:.75rem; font-weight:600; white-space:nowrap; }
  .susc.vigente{ background:#e3f1e8; color:#155e3c; border:1px solid #9ccdb4; }
  .susc.porvencer{ background:#fdf0d5; color:#7a5200; border:1px solid var(--gold); }
  .susc.vencida{ background:#fbe0dd; color:var(--bad); border:1px solid #e3a49c; }
  .susc.sinfecha{ color:var(--off); }
  .toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:var(--accent); color:#fff; padding:10px 18px; border-radius:8px; box-shadow:0 6px 24px rgba(0,0,0,.3); z-index:10; }