:root{
    --ink:#111; --line:#111; --bg:#fafafa; --card:#fff; --muted:#777;
    --disp-bg:#d9f2dc; --disp-bd:#2e7d32;
    --resv-bg:#ffe9b3; --resv-bd:#b26a00;
    --sena-bg:#cfe0ff; --sena-bd:#1a56b0;
    --vend-bg:#ffd6d6; --vend-bd:#b71c1c;
    --zuba-bg:#e4e4e4; --zuba-bd:#555;
  }
  *{box-sizing:border-box; margin:0; padding:0; font-family:"Segoe UI",system-ui,sans-serif;}
  body{background:var(--bg); color:var(--ink);}
  button{cursor:pointer; font:inherit;}
  input,select{font:inherit;}
  .hidden{display:none !important;}

  /* ---------- LOGIN ---------- */
  #loginView{min-height:100vh; display:flex; align-items:center; justify-content:center;}
  .login-card{background:var(--card); border:2px solid var(--line); border-radius:14px; padding:36px; width:340px; box-shadow:4px 4px 0 var(--line);}
  .login-card h1{font-size:20px; margin-bottom:4px;}
  .login-card p{color:var(--muted); font-size:13px; margin-bottom:20px;}
  .field{margin-bottom:14px;}
  .field label{display:block; font-size:12px; font-weight:600; margin-bottom:4px;}
  .field input, .field select{width:100%; padding:9px 10px; border:1.5px solid var(--line); border-radius:8px; background:#fff;}
  .btn{border:1.5px solid var(--line); border-radius:20px; padding:9px 18px; background:#111; color:#fff; font-weight:600;}
  .btn.secondary{background:#fff; color:#111;}
  .btn.small{padding:5px 12px; font-size:12px;}
  .btn.danger{background:#b71c1c; border-color:#b71c1c;}
  .btn:disabled{opacity:.5; cursor:not-allowed;}
  .btn-block{width:100%;}
  .error-msg{color:#b71c1c; font-size:13px; margin-top:10px; min-height:16px;}

  /* ---------- SHELL ---------- */
  .container{width:100%; max-width:1240px; margin:0 auto; padding:0 24px;}
  header.topbar{background:#fff; border-bottom:2px solid var(--line); padding:12px 0; position:sticky; top:0; z-index:20;}
  .topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .brand{font-weight:700;}
  .userbox{display:flex; align-items:center; gap:10px; font-size:14px;}
  .rolebadge{font-size:11px; border:1.5px solid var(--line); border-radius:12px; padding:2px 10px; font-weight:700;}
  .avatar{width:34px; height:34px; border:2px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; background:#fff;}
  .menu{position:relative;}
  .menu-list{position:absolute; right:0; top:42px; background:#fff; border:1.5px solid var(--line); border-radius:10px; min-width:190px; box-shadow:3px 3px 0 var(--line); overflow:hidden;}
  .menu-list button{display:block; width:100%; text-align:left; padding:10px 14px; border:none; background:#fff; font-size:14px;}
  .menu-list button:hover{background:#f0f0f0;}

  .toolbar{display:flex; align-items:center; gap:14px; padding:16px 0; flex-wrap:wrap;}
  .crumb{font-size:14px; white-space:nowrap;}
  .crumb a{color:var(--ink); text-decoration:none; font-weight:600;}
  .search{flex:1; min-width:180px; max-width:340px; display:flex; align-items:center; gap:6px; border:1.5px solid var(--line); border-radius:20px; padding:7px 14px; background:#fff;}
  .search input{border:none; outline:none; width:100%; background:transparent;}
  .chips{display:flex; gap:8px; flex-wrap:wrap;}
  .chip{border:1.5px solid var(--line); border-radius:18px; padding:7px 16px; background:#fff; font-size:13px; font-weight:600;}
  .chip.active{background:#111; color:#fff;}
  .viewtoggle{display:flex; gap:6px;}
  .viewtoggle button{border:1.5px solid var(--line); background:#fff; border-radius:8px; width:34px; height:34px; font-size:15px;}
  .viewtoggle button.active{background:#111; color:#fff;}

  /* ---------- CARDS ---------- */
  #cardsWrap{padding:8px 0 40px; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px;}
  #cardsWrap.list{grid-template-columns:1fr; max-width:760px; margin:0 auto;}
  .pcard{background:var(--card); border:2px solid var(--line); border-radius:14px; padding:18px; display:flex; gap:14px; cursor:pointer; transition:transform .08s; box-shadow:3px 3px 0 var(--line);}
  .pcard:hover{transform:translateY(-3px);}
  /* proyecto inactivo: solo visible para admin, con distintivo discreto */
  .pcard.inactivo{opacity:.55; filter:grayscale(.5); border-style:dashed;}
  .tag-inactivo{font-size:9.5px; font-weight:700; letter-spacing:.05em; color:#8a6d3b; background:#f3ead5; border:1px solid #d9c9a3; border-radius:9px; padding:1px 7px; vertical-align:2px; margin-left:6px;}
  .pcard .icon{font-size:34px; line-height:1;}
  /* columna interna: la barra de ocupación se ancla abajo, alineada entre tarjetas
     aunque el título ocupe dos líneas o falten filas de cocheras/bauleras */
  .pcard .body{flex:1; display:flex; flex-direction:column; min-width:0;}
  .pcard .bar{margin-top:auto; padding-top:0;}
  .pcard .stat:last-of-type{margin-bottom:10px;}
  .pcard h3{font-size:16px; margin-bottom:8px;}
  .stat{display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px; color:#333;}
  .stat .val{font-weight:700; border-radius:6px; padding:0 8px; min-width:28px; text-align:center;}
  .val.ok{background:var(--disp-bg); color:var(--disp-bd);}
  .val.zero{background:var(--vend-bg); color:var(--vend-bd);}
  .val.na{background:#eee; color:#999;}
  .bar{height:12px; border:1.5px solid var(--line); border-radius:8px; margin-top:10px; overflow:hidden; background:#fff;}
  .bar>div{height:100%; background:#111;}
  .empty-note{padding:40px; text-align:center; color:var(--muted);}

  /* ---------- DETALLE ---------- */
  #detailView{padding:0 0 50px;}
  .dt-head{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:14px; min-height:44px;}
  /* el título se centra en el espacio libre entre los controles (sin posición absoluta,
     así nunca se encima con los botones; si no entra, se corta con puntos suspensivos) */
  .dt-head h2{font-size:20px; flex:1; text-align:center; min-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  /* botones del segmento unificados; solo el título va en fuente mayor */
  .dt-head .btn-back, .dt-head .tabs button{font-size:13px; font-weight:600; padding:8px 16px; border-radius:18px; line-height:1.2; height:36px; display:inline-flex; align-items:center; justify-content:center;}
  .tabs{display:flex; gap:8px;}
  .tabs button{border:1.5px solid var(--line); background:#fff; border-radius:18px; padding:7px 18px; font-weight:600;}
  .tabs button.active{background:#111; color:#fff;}
  .legend{display:flex; gap:12px; flex-wrap:wrap; font-size:12px; margin:10px 0 18px;}
  .legend span{display:inline-flex; align-items:center; gap:5px;}
  .dot{width:13px; height:13px; border-radius:4px; border:1.5px solid var(--line); display:inline-block;}
  /* barra de filtros de la vista de unidades: estados | búsqueda | limpiar */
  .filtros-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:10px 0 18px;}
  .filtro-grupo{display:flex; align-items:center; gap:6px; flex-wrap:wrap; background:#fff;
                border:1.5px dashed var(--line); border-radius:12px; padding:6px 10px 6px 8px; position:relative;}
  .fg-lbl{font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
          color:var(--muted); margin:0 4px 0 2px;}
  .filtros-bar .lg-item{display:inline-flex; align-items:center; gap:6px; border:1.5px solid transparent;
                        background:transparent; border-radius:14px; padding:4px 11px; cursor:pointer;
                        font:inherit; font-size:13px; color:inherit; transition:background .1s, border-color .1s;}
  .filtros-bar .lg-item:hover{background:#f0f0f0;}
  .filtros-bar .lg-item.active{border-color:var(--line); background:#f5f5f5; font-weight:600;}
  .filtros-bar #estadoFiltroInfo{font-size:12px; color:var(--muted);}
  .filtros-bar select{padding:4px 8px; border:1.5px solid var(--line); border-radius:10px; font-size:12.5px; background:#fff; max-width:220px;}
  .filtros-bar .lg-busca{padding:4px 10px; border:1.5px solid var(--line); border-radius:12px; font-size:12.5px; width:140px;}
  .unit.oculta-filtro{display:none;}
  .floor{margin-bottom:22px; padding-bottom:20px; border-bottom:1px dashed #d8d8d8;}
  .floor:last-child{border-bottom:none; padding-bottom:0;}
  .floor h4{font-size:13px; color:var(--muted); margin-bottom:7px; display:flex; align-items:center; gap:10px;}
  .sector{margin-bottom:14px;}
  .sector:last-child{margin-bottom:0;}
  .sector h5{font-size:11.5px; color:var(--muted); font-weight:700; letter-spacing:.06em; margin-bottom:6px; padding-left:8px; border-left:3px solid #bbb;}
  .btn-plano{display:none;}
  .floor-body{display:flex; gap:16px; align-items:flex-start;}
  .floor-units{flex:1; min-width:0;}
  .plano-box{width:320px; flex-shrink:0; text-align:center;}
  .plano-box img{max-width:100%; max-height:260px; border:1.5px solid var(--line); border-radius:10px; cursor:zoom-in; background:#fff;}
  .plano-box small{display:block; color:var(--muted); font-size:10.5px; margin-top:3px;}
  /* spinner mientras carga la imagen del plano */
  .plano-frame{position:relative; min-height:110px; display:flex; align-items:center; justify-content:center;}
  /* capa con la unidad marcada: se superpone al plano base solo cuando ya cargó (sin pestañeo) */
  .plano-frame img.plano-over{position:absolute; inset:0; margin:auto; opacity:0; pointer-events:none; transition:opacity .12s;}
  .plano-frame img.plano-over.on{opacity:1; pointer-events:auto;}
  .plano-frame:not(.loaded)::after{content:''; position:absolute; width:26px; height:26px; border:3px solid #ddd; border-top-color:#111; border-radius:50%; animation:spin .8s linear infinite;}
  .plano-frame:not(.loaded) img{opacity:.15;}
  #planoLightbox.img-loading::after{content:''; position:fixed; top:50%; left:50%; margin:-18px 0 0 -18px; width:36px; height:36px; border:4px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite;}
  #planoLightbox.img-loading img{opacity:0;}
  #planoLightbox{cursor:zoom-out;}
  #planoLightbox img{max-width:95vw; max-height:92vh; border-radius:10px; background:#fff; border:2px solid var(--line);}
  .plano-mini{max-height:46px; max-width:90px; border:1px solid var(--line); border-radius:6px; cursor:zoom-in; vertical-align:middle;}
  .units{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:8px;}
  .unit{border:1.5px solid; border-radius:9px; padding:7px 6px; text-align:center; font-size:14px; font-weight:700; cursor:pointer; position:relative; display:flex; flex-direction:column; justify-content:flex-start;}
  .unit .unit-title{font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .unit .desc{font-weight:400; font-size:9.5px; line-height:1.3; margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:24px;}
  /* DISPONIBLE resaltado; el resto apagado para guiar la vista */
  .unit.DISPONIBLE{background:var(--disp-bg); border-color:var(--disp-bd); color:#1d5a22; box-shadow:2px 2px 0 rgba(46,125,50,.30);}
  .unit.DISPONIBLE:hover{transform:translateY(-2px); box-shadow:3px 4px 0 rgba(46,125,50,.35);}
  .unit.RESERVADO{background:#f6efdd; border-color:#dccfa9; color:#a5905e;}
  .unit.SEÑADO{background:#e9eef7; border-color:#c5d1e6; color:#8494b3;}
  .unit.VENDIDO{background:#f6e7e7; border-color:#dfc2c2; color:#b18f8f;}
  .unit.ZUBA{background:#efefef; border-color:#d6d6d6; color:#9e9e9e;}
  .unit.PENDIENTE{background:#f3f0fa; border-color:#c9bfe0; color:#8a7fae;}
  .unit.VIVA-BIEN{background:#e4efed; border-color:#bcd6d2; color:#7c9c97;}
  .unit.CANJE{background:#eef0e0; border-color:#cdd3a8; color:#84894f;}
  /* selección para cambio masivo */
  .unit.selbulk{outline:3px solid #111; outline-offset:1px;}
  /* botón de cambio masivo: aspecto de "herramienta" (borde punteado, sin forma de píldora)
     para diferenciarlo de las pestañas y de las tarjetas de unidades */
  .btn-bulk{border:1.5px dashed var(--line); background:#f5f5f5; color:#111; border-radius:8px; padding:8px 14px; font-size:13px; font-weight:600; height:36px; display:inline-flex; align-items:center; gap:6px; cursor:pointer;}
  .btn-bulk:hover{background:#e9e9e9;}
  #bulkBar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; padding:10px 14px; border:1.5px dashed var(--line); border-radius:10px; background:#fff;}
  #bulkBar select{padding:6px 8px; border:1.5px solid var(--line); border-radius:8px;}
  .unit:not(.DISPONIBLE){font-weight:600;}

  /* ---------- MODALS ---------- */
  .overlay{position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:50; padding:16px;}
  .modal{background:#fff; border:2px solid var(--line); border-radius:14px; padding:24px; width:100%; max-width:440px; max-height:92vh; overflow:auto; box-shadow:5px 5px 0 var(--line);}
  .modal.wide{max-width:860px;}
  #resModal .modal{max-width:680px;}
  #resModal .field{margin-bottom:12px;}
  #infoModal .modal{max-width:580px;}
  #planosModal .modal{max-width:980px;}
  #planosTable .btn{white-space:nowrap;}
  #planosTable td{vertical-align:middle;}
  #planosTable .cell-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .modal-actions{flex-wrap:wrap;}
  .modal-actions .btn{white-space:nowrap;}
  .modal h3{margin-bottom:14px; font-size:17px;}
  .modal .row{display:flex; gap:10px;}
  .modal .row .field{flex:1;}
  .res-head{display:flex; justify-content:space-between; align-items:stretch; gap:18px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid #e5e5e5;}
  .res-head-left{min-width:0; display:flex; flex-direction:column; justify-content:center;}
  .res-proj{font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.08em;}
  .res-unit{font-size:20px; font-weight:700; line-height:1.2; margin:3px 0 4px;}
  .res-desc{font-size:13px; color:#555; line-height:1.35;}
  .res-precios{font-size:13px; min-width:160px; flex-shrink:0; background:#f5f5f5; border-radius:10px; padding:10px 12px; align-self:flex-start;}
  .res-precios .pr-title{font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px;}
  .res-precios .pr-row{display:flex; justify-content:space-between; gap:14px; padding:1.5px 0;}
  .res-precios .pr-row span{color:#555;}
  .res-precios .pr-row b{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap;}
  @media (max-width:480px){
    .res-head{flex-direction:column; gap:10px;}
    .res-precios{min-width:0; width:100%;}
  }
  .btn-loader{display:inline-block; width:13px; height:13px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; margin-right:8px; vertical-align:-2px; animation:spin .8s linear infinite;}
  .dots-mini{position:absolute; right:12px; bottom:17px; display:inline-flex; gap:3px; pointer-events:none;}
  .dots-mini i{width:4px; height:4px; border-radius:50%; background:#777; animation:blink 1s infinite;}
  .dots-mini i:nth-child(2){animation-delay:.2s;}
  .dots-mini i:nth-child(3){animation-delay:.4s;}
  @keyframes blink{0%,80%,100%{opacity:.15} 40%{opacity:1}}
  #asesorLoading{right:12px;}
  .sug-list{position:fixed; background:#fff; border:1.5px solid var(--line); border-radius:8px; max-height:170px; overflow:auto; z-index:80; box-shadow:2px 3px 0 var(--line);}
  .sug-list div{line-height:1.3;}
  .sug-list div{padding:7px 10px; font-size:13px; cursor:pointer;}
  .sug-list div:hover{background:#f0f0f0;}
  .sug-list small{color:var(--muted);}
  .sug-list .sug-empty{color:var(--muted); cursor:default;}
  .radio-group{display:flex; gap:10px; margin-bottom:14px;}
  .radio-group label{flex:1; border:1.5px solid var(--line); border-radius:10px; padding:10px; text-align:center; font-weight:600; cursor:pointer;}
  .radio-group input{display:none;}
  .radio-group label.sel{background:#111; color:#fff;}
  .modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px;}
  .modal{position:relative;}
  .modal-x{position:absolute; top:10px; right:12px; width:30px; height:30px; border:none; background:transparent; font-size:16px; color:#888; border-radius:50%; line-height:1;}
  .modal-x:hover{background:#f0f0f0; color:#111;}
  /* acciones del detalle de unidad: utilidades discretas arriba, acciones principales abajo */
  #infoModal .modal-actions{flex-direction:column; align-items:stretch; gap:10px; border-top:1px solid #eee; padding-top:12px;}
  .info-utils{display:flex; gap:4px; flex-wrap:wrap;}
  .info-main{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;}
  .btn-ghost{border:none; background:transparent; color:#555; padding:6px 10px; font-size:12.5px; font-weight:600; border-radius:8px; display:inline-flex; align-items:center; gap:5px; cursor:pointer;}
  .btn-ghost:hover{background:#f0f0f0; color:#111;}
  .info-line{display:flex; justify-content:space-between; font-size:14px; padding:7px 0; border-bottom:1px dashed #ccc;}
  .info-line b{text-align:right;}
  .preview{max-width:100%; max-height:180px; border:1.5px solid var(--line); border-radius:8px; margin-top:8px; display:none;}
  #compPreviews{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
  #compPreviews img{max-height:110px; max-width:48%; border:1.5px solid var(--line); border-radius:8px;}
  #compPreviews .pdf-chip{border:1.5px solid var(--line); border-radius:8px; padding:8px 12px; font-size:12px; align-self:center;}
  table{width:100%; border-collapse:collapse; font-size:13px;}
  th,td{border:1px solid #999; padding:6px 8px; text-align:left;}
  th{background:#111; color:#fff; font-size:12px;}
  .tag{font-size:11px; font-weight:700; border-radius:10px; padding:1px 8px; display:inline-block;}
  .tag.ACTIVA{background:var(--disp-bg); color:var(--disp-bd);}
  .tag.CANCELADA{background:var(--vend-bg); color:var(--vend-bd);}
  .tag.ELEVADA_A_SEÑA{background:var(--sena-bg); color:var(--sena-bd);}
.tag.VENCIDA{background:#ececec; color:#777;}
.tag.VENDIDA{background:#e4efed; color:#3d5c53;}
/* confirmación de señas por facturación */
.conf-chip{display:inline-block; font-size:11px; font-weight:700; border-radius:9px; padding:1px 8px; white-space:nowrap;}
.conf-chip.pend{background:#f6efdd; color:#8a5a08; border:1px solid #dccfa9;}
.conf-chip.ok{background:#e2f3e8; color:#1a6b3c; border:1px solid #b9dcc6;}

/* bitácora / historial de unidad */
.hist-item{display:flex; gap:12px; padding:9px 0; border-bottom:1px dashed #ddd; font-size:13px; align-items:flex-start;}
.hist-item:last-child{border-bottom:none;}
.hist-fecha{white-space:nowrap; color:var(--muted); font-size:11.5px; min-width:104px; padding-top:2px;}
.hist-evento{font-size:10.5px; font-weight:700; letter-spacing:.04em; border:1px solid var(--line); border-radius:9px; padding:1px 7px; display:inline-block; margin-right:6px; background:#f5f5f5;}
.hist-trans{font-size:11.5px; color:var(--muted); font-weight:600; white-space:nowrap;}
.hist-detalle{color:#444; margin-top:2px; font-size:12px;}
.hist-user{color:var(--muted); font-size:11px; margin-top:1px;}
@media (max-width:640px){
  .hist-item{flex-direction:column; gap:2px;}
  .hist-fecha{min-width:0;}
}

/* campana de notificaciones */
.bell{position:relative; width:34px; height:34px; border:2px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; background:#fff; font-size:15px; user-select:none;}
.bell:hover{background:#f0f0f0;}
.bell-badge{position:absolute; top:-6px; right:-7px; background:#b71c1c; color:#fff; font-size:10px; font-weight:700; border-radius:10px; padding:1px 5px; min-width:16px; text-align:center; border:1.5px solid #fff;}
.notif-h{font-size:13px; margin:18px 0 8px;}
.notif-h:first-child{margin-top:0;}
.notif-empty{font-size:12.5px; color:var(--muted); margin-bottom:6px;}

/* ---- vista de reportes ---- */
.rep-h{font-size:15px; margin:18px 0 10px;}
.rep-table{font-size:13px;}
.rep-table th{white-space:nowrap;}
.rep-table td{white-space:nowrap;}

/* selector física/jurídica (modal de cliente): opción activa claramente marcada */
#clienteModal .radio-group input[type="radio"]{display:none;}
#clienteModal .radio-group label:has(input:checked){background:#111; color:#fff; border-color:#111;}

/* botón de alta directa de cliente junto al buscador */
.btn-nc{flex:none; border:1.5px solid var(--line); background:#f4faf6; color:#1d5c38; border-radius:8px;
        padding:9px 12px; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap;}
.btn-nc:hover{background:#e8f4ec;}

/* fila "registrar cliente nuevo" en el buscador de clientes */
.sug-list .sug-nuevo{padding:9px 12px; cursor:pointer; font-weight:600; color:#1d5c38;
                     border-top:1px solid var(--line); background:#f4faf6;}
.sug-list .sug-nuevo:hover{background:#e8f4ec;}

/* etiqueta editable en el listado de reservas */
.etq-cell{cursor:pointer; border-radius:8px; padding:2px 6px; display:inline-block; white-space:nowrap;}
.etq-cell:hover{background:#f0f0f0;}

/* ---- vista de reservas: barra de filtros ---- */
.res-filtros{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px;
             padding:12px 14px; background:#fff; border:1px solid var(--line); border-radius:12px;}
.res-filtros input{flex:1; min-width:180px; max-width:300px; padding:8px 12px;
                   border:1.5px solid var(--line); border-radius:18px; font-size:13.5px;}
.res-filtros select{padding:8px 10px; border:1.5px solid var(--line); border-radius:10px;
                    font-size:13px; background:#fff; max-width:220px;}
.res-filtros #resFilCount{font-size:12.5px; color:var(--muted); margin-left:auto; white-space:nowrap;}
@media (max-width:640px){
  .res-filtros{padding:10px;}
  .res-filtros input, .res-filtros select{max-width:none; width:100%;}
  .res-filtros #resFilCount{margin-left:0;}
}

/* ---- vista de administración de proyectos ---- */
.abm-info{border:1px solid var(--line); border-radius:10px; background:#fff; margin-bottom:16px;}
.abm-info > summary{cursor:pointer; padding:11px 16px; font-size:13px; font-weight:600; list-style:none; user-select:none;}
.abm-info > summary::-webkit-details-marker{display:none;}
.abm-info p{padding:0 16px 14px; font-size:12.5px; color:var(--muted); line-height:1.6; margin:0;}
.abm-tablewrap{overflow:auto; background:#fff; border:1px solid var(--line); border-radius:12px; padding:4px 10px 10px;}
.abm-table{width:100%;}
.abm-actions{white-space:nowrap;}
.abm-actions .btn{margin:2px 2px 2px 0;}
.abm-publico{white-space:nowrap;}
.btn-mini{border:1.5px solid var(--line); background:#fff; border-radius:7px; width:26px; height:26px;
          cursor:pointer; font-size:12px; vertical-align:middle; margin-left:4px;}
.btn-mini.danger{color:#a33; border-color:#c99;}
.abm-form{background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 20px 8px; margin:18px 0 40px; max-width:760px;}
.abm-form h3{font-size:15px; margin-bottom:12px;}
.abm-form .modal-actions{margin-top:2px; padding-bottom:10px;}

/* ---- modal de reglas de negocio: secciones ---- */
.reglas-sec{border:1.5px solid var(--line); border-radius:10px; padding:14px 16px 6px; margin-bottom:14px;}
.reglas-sec .row .field{margin-bottom:12px;}
.reglas-h{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
          color:var(--muted); margin:0 0 12px;}
.reglas-hint{font-size:12px; color:var(--muted); margin:0 0 10px; line-height:1.5;}
.reglas-check{display:flex; align-items:flex-start; gap:10px; cursor:pointer;
              font-size:13.5px; line-height:1.5; padding-bottom:10px;}
.reglas-check input{width:auto; margin-top:3px; flex:none;}

/* ---- vista de notificaciones: secciones y subgrupos colapsables ---- */
.notif-acc{background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:14px; overflow:hidden;}
.notif-acc > summary{cursor:pointer; padding:14px 18px; font-weight:700; font-size:14px;
                     display:flex; align-items:center; gap:10px; list-style:none; user-select:none;}
.notif-acc > summary::-webkit-details-marker{display:none;}
.notif-acc > summary::after{content:'▾'; margin-left:auto; color:var(--muted); transition:transform .15s;}
.notif-acc:not([open]) > summary::after{transform:rotate(-90deg);}
.notif-acc > summary:hover{background:#fafafa;}
.notif-acc .acc-body{padding:0 18px 16px;}
.notif-count{background:#ececec; color:#444; border-radius:999px; padding:2px 10px; font-size:12px; font-weight:700;}
.notif-count.warn{background:#f6efdd; color:#8a5a08;}
.notif-count.danger{background:#f6e7e7; color:#a33;}
.notif-sub{border:1px solid var(--line); border-radius:10px; margin:10px 0; background:#fff;}
.notif-sub > summary{cursor:pointer; padding:9px 14px; font-size:13px; font-weight:600;
                     display:flex; align-items:center; gap:8px; list-style:none; user-select:none;}
.notif-sub > summary::-webkit-details-marker{display:none;}
.notif-sub > summary::after{content:'▾'; margin-left:auto; color:var(--muted); transition:transform .15s;}
.notif-sub:not([open]) > summary::after{transform:rotate(-90deg);}
.notif-sub .sub-body{padding:0 12px 12px;}
@media (max-width:640px){
  .notif-acc > summary{padding:12px 14px; font-size:13px;}
  .notif-acc .acc-body{padding:0 12px 12px;}
}
  .toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:#111; color:#fff; padding:11px 22px; border-radius:22px; font-size:14px; z-index:99; box-shadow:0 4px 14px rgba(0,0,0,.3);}
  .spinner{padding:50px; text-align:center; color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:12px; font-size:14px;}
  .loader{width:30px; height:30px; border:3px solid #ddd; border-top-color:#111; border-radius:50%; animation:spin .8s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg)}}
  .brand{cursor:pointer;}
  .btn-back{display:inline-flex; align-items:center; gap:6px;}
  #usersTable, #reservationsTable{overflow-x:auto;}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:900px){
    .container{padding:0 16px;}
    .toolbar{gap:10px;}
    .search{max-width:none; order:3; flex-basis:100%;}
  }
  @media (max-width:640px){
    .container{padding:0 12px;}
    .brand{font-size:14px;}
    #userName{display:none;}
    .crumb{flex-basis:100%;}
    .chips{flex-wrap:nowrap; overflow-x:auto; max-width:100%; padding-bottom:4px; -webkit-overflow-scrolling:touch;}
    .chip{white-space:nowrap; padding:6px 12px; font-size:12px;}
    .viewtoggle{display:none;}
    #cardsWrap{grid-template-columns:1fr; gap:14px;}
    .dt-head{gap:10px;}
    .dt-head h2{position:static; transform:none; flex-basis:100%; text-align:center; font-size:17px; order:-1;}
    .dt-head .tabs{margin-left:0;}
    .dt-head .btn-back, .tabs button{padding:6px 12px; font-size:12px; height:32px;}
    .units{grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:6px;}
    /* en móvil el plano no se muestra inline: se abre con el botón "Ver plano" */
    .plano-box{display:none;}
    .btn-plano{display:inline-flex; align-items:center; padding:2px 10px; font-size:11px; height:24px; border-radius:12px;}
    .floor{margin-bottom:16px;}
    .floor h4{position:sticky; top:58px; background:var(--bg); z-index:5; padding:6px 0; margin-bottom:4px;}
    .unit{padding:6px 4px; border-radius:7px;}
    .unit .unit-title{font-size:11px;}
    .unit .desc{font-size:8.5px; min-height:auto; -webkit-line-clamp:3;}
    .legend{gap:8px; font-size:11px;}
    .modal{padding:16px; max-height:88vh;}
    .modal .row{flex-direction:column; gap:0;}
    .modal-actions{flex-wrap:wrap;}
    .modal-actions .btn{flex:1; text-align:center;}
    .login-card{width:100%; max-width:340px; padding:26px;}
  }

/* =====================================================================
   REFINAMIENTO RESPONSIVE v2 — smartphones, tablets y laptops
   ===================================================================== */
body{overflow-x:hidden;}
.chips{scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.btn:active{transform:scale(.97);}
.unit{-webkit-tap-highlight-color:rgba(0,0,0,.08);}

/* ---------- Tablets (641–1024px) ---------- */
@media (max-width:1024px){
  .plano-box{width:260px;}
  .modal.wide{max-width:96vw;}
}

/* ---------- Tablets y móviles: cabecera del detalle apilada ----------
   (con Volver + título + pestañas + Cambio masivo ya no entra en una fila) */
@media (max-width:900px){
  .dt-head h2{position:static; transform:none; flex-basis:100%; text-align:center; font-size:18px; order:-1; white-space:normal;}
  .dt-head{justify-content:center;}
  .dt-head .tabs{margin-left:0;}
}

/* ---------- Móviles (≤640px) ---------- */
@media (max-width:640px){
  header.topbar{padding:8px 0;}
  .rolebadge{font-size:10px; padding:2px 8px;}
  .avatar{width:30px; height:30px; font-size:13px;}
  .bell{width:30px; height:30px; font-size:13px;}

  /* inputs a 16px: evita el auto-zoom de iOS al enfocar */
  .field input, .field select, #bulkBar select{font-size:16px;}

  .modal{padding:14px; border-radius:12px; max-height:92vh;}
  .modal h3{font-size:15px;}
  .overlay{padding:8px;}
  .res-unit{font-size:18px;}
  .info-line{font-size:13px;}

  table{font-size:12px;}
  th,td{padding:5px 6px;}

  #bulkBar{padding:8px 10px; gap:6px;}
  .btn-bulk{height:32px; font-size:12px; padding:6px 10px;}
  #bulkBar .btn{flex:1; min-width:0;}
  #bulkBar select{flex-basis:100%;}
  #bulkBar .bulk-hint{display:none;} /* la ayuda larga no entra en móvil */

  .toast{width:calc(100% - 24px); max-width:none; text-align:center; bottom:12px; box-sizing:border-box;}
  .sug-list{max-height:150px;}
  #compPreviews img{max-width:46%;}
  .pcard{padding:14px;}
  .pcard .icon{font-size:28px;}
}

/* chips de unidades agregadas a la operación conjunta */
.chips-extras{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px;}
.chips-extras:empty{margin-bottom:0;}
.chip-extra{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; border:1.5px solid var(--line); border-radius:14px; padding:3px 6px 3px 11px; background:#fff;}
.chip-extra button{border:none; background:#eee; color:#666; font-size:11px; width:18px; height:18px; border-radius:50%; line-height:1; padding:0;}
.chip-extra button:hover{background:#ddd; color:#111;}

/* campos opcionales compactos y discretos (etiqueta / validez personalizada) */
.field-opt label{font-size:10.5px; color:var(--muted); font-weight:600;}
.field-opt input, .field-opt select{padding:6px 9px; font-size:13px; border:1px solid #c4c4c4; border-radius:7px;}
.field-opt input::placeholder{color:#b5b5b5;}
.opt-row{align-items:flex-end;}
@media (max-width:640px){
  .field-opt input, .field-opt select{font-size:16px;} /* mantiene el anti-zoom de iOS */
  .opt-row .field-opt{max-width:none !important;}
}

/* ---------- Pantallas muy chicas (≤380px) ---------- */
@media (max-width:380px){
  .units{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));}
  .tabs{flex-wrap:wrap; justify-content:center;}
  .chip{padding:5px 10px;}
  .login-card{padding:20px;}
}