/* ═══════════════════════════════════════════════════════════════════════════
   COPROPIEDADES + PERMISOS (4-oct-2026).
   · Copropiedades (clientes.js): tarjeta por copropiedad con las cifras de cada módulo y atajos; ficha en hoja; alta.
   · Permisos (permisos.js): tarjeta por persona; hoja con el ALCANCE (todas / solo algunas copropiedades) y los módulos.
   Se apoya en informes.css (.x-*, #sgxHoja). Lo propio va con .cp- (copropiedades) y .pm- (permisos).
   Celular primero: nada de tablas, toques ≥ 44 px, nada se sale del ancho.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Cabecera con acciones que se acomodan en el celular ── */
.cp-head .x-acciones { display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:560px){
  .cp-head { align-items:stretch; }
  .cp-head .x-acciones { width:100%; }
  .cp-head .x-acciones .x-btn { flex:1 1 0; padding:0 10px; }
}
.cp-alc { display:flex; align-items:center; gap:10px; background:#eef3f1; border:1px solid #cfdcd8; border-radius:12px; padding:10px 12px; margin-bottom:12px; font-size:13.5px; color:var(--x-navy); }
.cp-alc i { font-style:normal; font-size:18px; flex:none; }
.cp-alc b { font-weight:700; }

/* ── Tarjeta de copropiedad ── */
.cp-grid { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:760px){ .cp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1280px){ .cp-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.cp-c { position:relative; display:flex; flex-direction:column; gap:10px; min-width:0; padding:16px 16px 14px; border-radius:16px; border:1px solid var(--x-linea);
  background:#fff; box-shadow:0 1px 2px rgba(34,65,74,.05), 0 4px 14px rgba(34,65,74,.05); cursor:pointer; transition:box-shadow .15s, border-color .15s; }
.cp-c::before { content:''; position:absolute; left:-1px; top:18px; bottom:18px; width:3px; border-radius:0 3px 3px 0; background:var(--x-verde); }
.cp-c:hover { box-shadow:0 2px 4px rgba(34,65,74,.06), 0 10px 26px rgba(34,65,74,.10); border-color:#d9d2c3; }
.cp-c:focus-visible { outline:3px solid rgba(143,196,177,.6); outline-offset:2px; }
.cp-c.apagada { opacity:.8; } .cp-c.apagada::before { background:var(--x-gris2); }
.cp-c-h { display:flex; align-items:flex-start; gap:10px; }
.cp-ini { width:42px; height:42px; flex:none; border-radius:12px; background:var(--x-navy); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--x-serif); font-size:17px; font-weight:600; letter-spacing:.02em; }
.cp-c-t { flex:1; min-width:0; }
.cp-c-t b { display:block; font-family:var(--x-serif); font-weight:600; font-size:17px; line-height:1.25; color:var(--x-navy); overflow-wrap:anywhere; }
.cp-c-t small { display:block; font-size:12.5px; color:var(--x-gris); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-c .x-pil { margin-top:2px; }
.x-pil.ok { background:var(--x-ok-bg); color:var(--x-ok); } .x-pil.al { background:var(--x-al-bg); color:var(--x-al); } .x-pil.cr { background:var(--x-cr-bg); color:var(--x-cr); }

/* Cifras por módulo (atajos): 3 por fila en el celular, todas en una fila en PC ancha. */
.cp-mods { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.cp-mod { display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0; min-height:58px; padding:8px 9px; border-radius:10px; border:1px solid #efeadf;
  background:var(--x-fondo); font:inherit; text-align:left; cursor:pointer; color:var(--x-texto); transition:background .12s, border-color .12s; }
.cp-mod:hover { background:#fff; border-color:var(--x-menta); }
.cp-mod small { font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--x-gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.cp-mod b { font-family:inherit; font-size:18px; font-weight:700; color:var(--x-navy); line-height:1.15; font-variant-numeric:lining-nums tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.cp-mod b.al { color:var(--x-al); } .cp-mod b.cero { color:var(--x-gris2); }
.cp-mod em { font-style:normal; font-size:11px; color:var(--x-gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.cp-c-pie { display:flex; flex-wrap:wrap; gap:6px 12px; font-size:12.5px; color:var(--x-gris); padding-top:8px; border-top:1px solid #f0ece2; }
.cp-c-pie span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }

/* ── Ficha ── */
.cp-banda { background:var(--x-navy); color:#fff; border-radius:14px; padding:16px 16px 14px 20px; position:relative; overflow:hidden; }
.cp-banda::before { content:''; position:absolute; left:0; top:14px; bottom:14px; width:4px; background:var(--x-verde); border-radius:0 2px 2px 0; }
.cp-banda::after { content:''; position:absolute; right:-70px; bottom:-100px; width:220px; height:220px; border-radius:50%; background:var(--x-menta); opacity:.09; }
.cp-banda small { color:var(--x-menta); font-size:10.5px; letter-spacing:.14em; font-weight:700; text-transform:uppercase; }
.cp-banda b { display:block; font-family:var(--x-serif); font-size:19px; font-weight:600; line-height:1.25; margin:4px 0 6px; overflow-wrap:anywhere; }
.cp-banda p { font-size:13px; color:#d5e3df; line-height:1.4; overflow-wrap:anywhere; }
.cp-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
@media (max-width:380px){ .cp-tiles { grid-template-columns:1fr; } }
.cp-tile { display:flex; align-items:center; gap:10px; min-width:0; min-height:60px; padding:10px 12px; border-radius:12px; border:1px solid var(--x-linea); background:#fff;
  font:inherit; text-align:left; cursor:pointer; color:var(--x-texto); }
.cp-tile:hover { border-color:var(--x-menta); box-shadow:0 4px 12px rgba(34,65,74,.08); }
.cp-tile > i { font-style:normal; font-size:20px; line-height:1; flex:none; width:30px; text-align:center; overflow:visible; }
.cp-tile span { min-width:0; flex:1; line-height:1.25; }
.cp-tile span b { display:block; font-size:14px; color:var(--x-navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-tile span small { display:block; font-size:12px; color:var(--x-gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-tile::after { content:'›'; font-size:20px; color:var(--x-gris2); flex:none; }
.cp-acc { display:flex; flex-direction:column; gap:8px; }
.cp-acc-p { display:flex; align-items:center; gap:10px; min-width:0; padding:8px 10px; border:1px solid #efeadf; border-radius:12px; background:var(--x-fondo); }
.cp-acc-p .cp-av { width:34px; height:34px; flex:none; border-radius:50%; background:var(--x-navy2); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; }
.cp-acc-p div { min-width:0; flex:1; line-height:1.25; }
.cp-acc-p div b { display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-acc-p div small { display:block; font-size:12px; color:var(--x-gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-acc-p .x-pil { flex:none; }

/* ── Alta ── */
.cp-dos { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:560px){ .cp-dos { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.cp-req { color:var(--x-cr); font-weight:700; }
.cp-rut { display:flex; align-items:center; gap:12px; min-height:64px; padding:12px 14px; border:1.5px dashed #cfc7b6; border-radius:12px; background:var(--x-fondo); cursor:pointer; font:inherit; color:var(--x-texto); text-align:left; width:100%; }
.cp-rut:hover { border-color:var(--x-verde); background:#fff; }
.cp-rut.listo { border-style:solid; border-color:#c3e2d4; background:var(--x-ok-bg); }
.cp-rut > i { font-style:normal; font-size:24px; flex:none; }
.cp-rut span { min-width:0; flex:1; line-height:1.3; }
.cp-rut span b { display:block; font-size:14px; color:var(--x-navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-rut span small { display:block; font-size:12px; color:var(--x-gris); }
.cp-nota { font-size:12.5px; color:var(--x-gris); line-height:1.45; }

/* ══════════════════════════ PERMISOS ══════════════════════════ */
.pm-grid { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:760px){ .pm-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1280px){ .pm-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.pm-u { display:flex; flex-direction:column; gap:10px; min-width:0; padding:14px 16px; border-radius:16px; border:1px solid var(--x-linea); background:#fff;
  box-shadow:0 1px 2px rgba(34,65,74,.05), 0 4px 14px rgba(34,65,74,.05); cursor:pointer; text-align:left; font:inherit; color:var(--x-texto); width:100%; }
.pm-u:hover { box-shadow:0 2px 4px rgba(34,65,74,.06), 0 10px 26px rgba(34,65,74,.10); border-color:#d9d2c3; }
.pm-u:focus-visible { outline:3px solid rgba(143,196,177,.6); outline-offset:2px; }
.pm-u-h { display:flex; align-items:center; gap:10px; min-width:0; }
.pm-av { width:40px; height:40px; flex:none; border-radius:50%; background:var(--x-navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; }
.pm-u-h div { min-width:0; flex:1; line-height:1.25; }
.pm-u-h div b { display:block; font-size:15px; color:var(--x-navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-u-h div small { display:block; font-size:12.5px; color:var(--x-gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-alc { display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.35; padding:8px 10px; border-radius:10px; background:#eef3f1; color:var(--x-navy); }
.pm-alc.limitado { background:var(--x-al-bg); color:#6e4300; }
.pm-alc i { font-style:normal; flex:none; }
.pm-alc span { min-width:0; overflow-wrap:anywhere; }
.pm-mods { display:flex; flex-wrap:wrap; gap:5px; }
.pm-tag { display:inline-flex; align-items:center; gap:4px; max-width:100%; border-radius:999px; padding:3px 9px; font-size:12px; font-weight:600; background:var(--x-ok-bg); color:var(--x-ok); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-tag.ver { background:var(--x-ne-bg); color:var(--x-ne); }
.pm-vacio { font-size:12.5px; color:var(--x-gris); font-style:italic; }

/* Hoja de edición */
.pm-sec { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--x-gris); margin-top:4px; }
.pm-cops { display:flex; flex-wrap:wrap; gap:6px; }
.pm-cop { display:inline-flex; align-items:center; gap:8px; max-width:100%; min-height:44px; padding:0 14px; border-radius:999px; border:1px solid var(--x-linea); background:#fff;
  font:inherit; font-size:14px; cursor:pointer; color:var(--x-texto); }
.pm-cop span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.pm-cop::before { content:''; width:18px; height:18px; flex:none; border-radius:6px; border:1.5px solid #c7bfae; background:#fff; }
.pm-cop[aria-pressed="true"] { background:var(--x-navy); border-color:var(--x-navy); color:#fff; font-weight:600; }
.pm-cop[aria-pressed="true"]::before { border-color:#fff; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2322414a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.pm-mlist { display:flex; flex-direction:column; gap:8px; }
.pm-m { display:flex; align-items:center; gap:10px; min-width:0; padding:8px 10px; border:1px solid #efeadf; border-radius:12px; background:var(--x-fondo); }
.pm-m-t { flex:1; min-width:0; line-height:1.25; }
.pm-m-t b { display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-m-t small { display:block; font-size:11.5px; color:var(--x-gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-m .x-seg { flex:none; width:264px; grid-auto-columns:auto; grid-template-columns:1.35fr 1fr 1fr; }
.pm-m .x-seg button { min-height:36px; font-size:13px; padding:0 6px; white-space:nowrap; }
@media (max-width:480px){
  .pm-m { flex-wrap:wrap; }
  .pm-m-t { flex-basis:100%; }
  .pm-m .x-seg { width:100%; }
}
.pm-todos { display:flex; gap:8px; flex-wrap:wrap; }
.pm-todos .x-btn { flex:1 1 0; min-height:40px; font-size:13px; padding:0 8px; }
.pm-gente { display:flex; flex-direction:column; border:1px solid var(--x-linea); border-radius:12px; max-height:38vh; overflow:auto; background:#fff; }
.pm-per { display:flex; align-items:center; gap:10px; min-height:52px; padding:8px 12px; border:0; border-bottom:1px solid #f0ece2; background:#fff; font:inherit; text-align:left; cursor:pointer; color:var(--x-texto); width:100%; }
.pm-per:last-child { border-bottom:0; }
.pm-per::before { content:''; width:20px; height:20px; flex:none; border-radius:6px; border:1.5px solid #c7bfae; background:#fff; }
.pm-per[aria-pressed="true"] { background:#eef6f2; }
.pm-per[aria-pressed="true"]::before { border-color:var(--x-verde-osc); background:var(--x-verde-osc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.pm-per div { min-width:0; flex:1; line-height:1.25; }
.pm-per div b { display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-per div small { display:block; font-size:12px; color:var(--x-gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-per em { font-style:normal; flex:none; font-size:11px; font-weight:700; color:var(--x-al); background:var(--x-al-bg); border-radius:999px; padding:2px 8px; }
.pm-quitar.armado { background:var(--x-cr); border-color:var(--x-cr); color:#fff; }