/* Scanova · estilo. El diseño de Amilcar (12 oct 2026): barra lateral clara, "Welcome", tarjetas de Recent Projects
   con foto, la tabla All Projects con etapa en pastilla, y en el teléfono la barra de abajo con la cámara azul al centro.
   Letra: Plus Jakarta Sans. Sin position:fixed (falla en su iPhone): el que se desplaza es <main>. */
:root{
  --bg:#ffffff; --bg2:#f2f6fb; --card:#ffffff; --line:#e5ebf3; --line2:#d3dce8;
  --ink:#0f1a2e; --ink-soft:#56657c; --ink-mute:#8b98ac;
  --accent:#2563eb; --accent-dark:#1d4ed8; --accent-soft:#e8f0ff;
  --lat:#f6f9fd; --lat-ink:#1f2a3d;
  --ok:#16a34a; --danger:#b51b2e; --danger-soft:#fbe9ec; --warn:#f2b413; --warn-soft:#fff6d6;
  --p-curso:#2563eb; --p-curso-bg:#e8f0ff; --p-plan:#7c3aed; --p-plan-bg:#f1e8ff; --p-hecho:#16a34a; --p-hecho-bg:#e4f6ea; --p-arch:#5b6b85; --p-arch-bg:#eef1f5;
  --chip-grey:#828c95; --chip-dark:#2e3a4a;
  --sombra:0 1px 2px rgba(16,40,80,.05), 0 8px 24px rgba(16,40,80,.07);
}
:root[data-tema="oscuro"]{
  --bg:#121a28; --bg2:#0d1420; --card:#151e2e; --line:#243046; --line2:#34405a;
  --ink:#eef2f7; --ink-soft:#a3aec0; --ink-mute:#7c8799; --lat:#111a29; --lat-ink:#dbe3ee;
  --accent:#3b82f6; --accent-dark:#2563eb; --accent-soft:#1a2a4a;
  --p-curso-bg:#1a2a4a; --p-plan-bg:#2a1f45; --p-hecho-bg:#173a26; --p-arch-bg:#222c3c;
  --danger-soft:#3a1a1a; --warn-soft:#3a2f12; --sombra:0 10px 30px rgba(0,0,0,.45);
}
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg2); color:var(--ink); font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; -webkit-text-size-adjust:100%; }
.ic{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.logo{ width:64px; height:64px; display:block; }
.logo-chico{ width:34px; height:34px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- ARMAZON ---------- */
.app{ display:flex; height:100vh; height:100dvh; position:relative; }
.lateral{ display:none; }
.contenido{ flex:1; min-width:0; display:flex; flex-direction:column; height:100%; background:linear-gradient(180deg,#f8fbff 0%, var(--bg2) 100%); }
:root[data-tema="oscuro"] .contenido{ background:var(--bg2); }
main{ flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; padding:6px 18px 28px; }
.avatar{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#5b7390; color:#fff; font-size:13px; font-weight:700; letter-spacing:.02em; flex:0 0 auto; }
.avatar-azul{ background:linear-gradient(180deg,#3b82f6,#2563eb); }
body.modo-entrar .lateral, body.modo-entrar .tope, body.modo-entrar .pie{ display:none !important; }
body.modo-entrar main{ padding:0; }
.pantalla[hidden]{ display:none !important; }

/* ---------- BARRA DE ARRIBA ---------- */
.tope{ display:flex; align-items:center; gap:10px; padding:12px 18px 8px; padding-top:calc(12px + env(safe-area-inset-top)); flex:0 0 auto; }
.tope-logo, .lat-logo{ font-weight:800; letter-spacing:-.035em; color:var(--ink); line-height:1; }
.tope-logo span, .lat-logo span{ color:var(--accent); }
.tope-logo{ flex:1; font-size:26px; }
.tope-buscar{ display:none; }
.tope-btn{ position:relative; width:42px; height:42px; border-radius:50%; border:0; background:transparent; color:var(--ink); display:grid; place-items:center; cursor:pointer; }
.tope-btn:hover{ background:var(--accent-soft); }
.tope-btn .ic{ width:23px; height:23px; }
.punto{ position:absolute; top:9px; right:10px; width:9px; height:9px; border-radius:50%; background:#e5484d; box-shadow:0 0 0 2px var(--bg2); }
.punto[hidden]{ display:none !important; }
.avatar-tope{ width:42px; height:42px; font-size:15px; }

/* ---------- BARRA DE ABAJO (teléfono): la cámara al centro ---------- */
.pie{ display:flex; align-items:flex-end; flex:0 0 auto; position:relative; z-index:5; background:var(--card); border-top:1px solid var(--line); padding:6px 4px calc(8px + env(safe-area-inset-bottom)); }
.pie[hidden]{ display:none !important; }
.tab{ flex:1 1 0; position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; font:inherit; font-size:11.5px; font-weight:600; color:var(--ink-soft); background:none; border:0; border-radius:8px; padding:6px 2px 2px; cursor:pointer; }
.tab .ic{ width:24px; height:24px; }
.tab.on{ color:var(--accent); }
.tab[hidden]{ display:none !important; }
.tab-cam{ padding-top:0; }
.fab{ display:grid; place-items:center; width:62px; height:62px; margin-top:-30px; border-radius:50%; color:#fff; background:linear-gradient(180deg,#3b82f6,#2563eb); box-shadow:0 10px 22px rgba(37,99,235,.38), 0 0 0 6px var(--card); }
.fab .ic{ width:28px; height:28px; stroke-width:2; }
.conteo{ display:inline-block; min-width:18px; padding:0 5px; border-radius:999px; background:#e5484d; color:#fff; font-size:11px; line-height:18px; font-weight:700; text-align:center; }
.conteo[hidden]{ display:none !important; }
.tab .conteo{ position:absolute; top:2px; left:calc(50% + 6px); }

/* ---------- TITULOS, BOTONES, CAMPOS ---------- */
.titulo{ margin:0; font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.titulo.chico{ font-size:22px; margin-bottom:14px; }
.titulo-fila{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 14px; }
.sub-pantalla{ color:var(--ink-soft); margin:-4px 0 16px; font-size:15px; }
.solo-escritorio{ display:none; }
.btn{ font:inherit; font-size:15px; font-weight:600; min-height:44px; padding:0 16px; border-radius:10px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; color:var(--ink); background:var(--bg2); text-decoration:none; white-space:nowrap; }
.btn .ic{ width:18px; height:18px; }
.btn-accent{ background:linear-gradient(180deg,#3b82f6,#2563eb); color:#fff; box-shadow:0 6px 14px rgba(37,99,235,.25); }
.btn-accent:hover{ background:var(--accent-dark); }
.btn-outline{ background:var(--card); color:var(--ink); border-color:var(--line2); }
.btn-outline:hover{ background:var(--bg2); }
.btn-rojo{ color:var(--danger); }
.btn-block{ width:100%; }
.btn-grande{ min-height:48px; font-size:16px; }
.btn[disabled]{ opacity:.55; cursor:default; }
.btn[hidden]{ display:none !important; }
.fila-botones{ display:flex; gap:10px; margin-top:6px; }
.fila-botones .btn{ flex:1 1 0; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:14px; font-weight:600; margin-bottom:6px; }
.field label .hint{ font-weight:400; color:var(--ink-soft); font-size:12px; }
.field input, .field select, .field textarea{ width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--card); border:1px solid var(--line2); border-radius:10px; padding:0 12px; height:44px; }
.field textarea{ min-height:88px; height:auto; padding:10px 12px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.18); }
.avance-forma{ display:flex; align-items:center; gap:10px; }
.avance-forma input[type=range]{ flex:1; height:auto; padding:0; border:0; accent-color:var(--accent); }
.avance-forma input[type=number]{ width:84px; flex:0 0 auto; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 16px; margin-bottom:14px; box-shadow:var(--sombra); }
.aviso{ color:var(--danger); font-size:14px; margin:8px 0 0; min-height:1em; }
.aviso.ok{ color:var(--ok); }
.vacio{ color:var(--ink-soft); text-align:center; padding:28px 10px; line-height:1.5; margin:0; }
.parche{ background:var(--bg2); border-radius:8px; padding:12px; color:var(--ink-soft); font-size:14px; line-height:1.45; margin:0 0 14px; }
.parche.izq{ text-align:left; }
.volver{ display:inline-flex; align-items:center; gap:4px; font:inherit; font-size:14px; font-weight:600; color:var(--ink-soft); background:none; border:0; padding:4px 0 14px; cursor:pointer; }
.volver:hover{ color:var(--accent); }
.volver .ic{ width:18px; height:18px; }
.buscar{ position:relative; display:block; }
.buscar .ic{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--ink-mute); width:18px; height:18px; }
.buscar input{ width:100%; font:inherit; font-size:15px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:10px; height:44px; padding:0 12px 0 40px; box-shadow:0 1px 2px rgba(16,40,80,.04); }
.buscar input:focus, .sel select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.18); }
.sel{ position:relative; display:block; }
.sel select{ appearance:none; -webkit-appearance:none; width:100%; font:inherit; font-size:15px; font-weight:500; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:10px; height:44px; padding:0 40px 0 16px; cursor:pointer; box-shadow:0 1px 2px rgba(16,40,80,.04); }
.sel .ic{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--ink-soft); pointer-events:none; }

/* ---------- HOME ---------- */
.bienv{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin:8px 0 22px; }
.bienv-t{ margin:0; font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1.1; }
.bienv-sub{ margin:8px 0 0; color:var(--ink-soft); font-size:15.5px; }
.bienv-fecha{ display:none; color:var(--ink-soft); font-size:15px; white-space:nowrap; padding-top:12px; }
.sec-cab{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; flex-wrap:wrap; }
.sec-t{ margin:0; font-size:19px; font-weight:700; letter-spacing:-.01em; }
.ver-todo{ font:inherit; font-size:16px; font-weight:600; color:var(--accent); background:none; border:0; padding:4px 0; cursor:pointer; }
.ver-todo:hover{ text-decoration:underline; }
.icono-btn{ width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink-soft); display:grid; place-items:center; cursor:pointer; box-shadow:0 1px 2px rgba(16,40,80,.04); }
.sec-herr{ display:none; width:100%; flex-direction:column; gap:10px; }
.sec-herr.abierto{ display:flex; }
.sec-solo-herr{ justify-content:flex-end; }

/* Recent Projects: en el teléfono, filas con la foto a la izquierda; en la computadora, 3 tarjetas. */
.recientes{ display:flex; flex-direction:column; gap:14px; margin-bottom:28px; }
.tarj{ display:grid; grid-template-columns:118px minmax(0,1fr); gap:14px; cursor:pointer; border-radius:12px; }
.tarj-foto{ position:relative; height:108px; border-radius:10px; overflow:hidden; background:linear-gradient(135deg,#e9f0fa,#dfe8f5); }
.tarj-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.sin-foto{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--ink-mute); }
.sin-foto .ic{ width:28px; height:28px; stroke-width:1.5; }
.sin-foto small{ font-size:11.5px; font-weight:600; }
.tarj-cuerpo{ min-width:0; padding-top:2px; }
.tarj-nom{ font-size:15.5px; font-weight:700; line-height:1.25; }
.tarj-dir{ color:var(--ink-soft); font-size:13.5px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tarj-fecha{ color:var(--ink-mute); font-size:13px; margin-top:2px; }
.mas-btn{ width:34px; height:34px; border-radius:8px; border:0; background:transparent; color:var(--ink-soft); display:grid; place-items:center; cursor:pointer; }
.mas-btn:hover{ background:var(--bg2); color:var(--ink); }
.mas-btn.flot{ display:none; position:absolute; top:10px; right:10px; background:#fff; color:var(--ink); box-shadow:0 2px 8px rgba(16,40,80,.18); }
.pill{ display:inline-block; padding:3px 11px; border-radius:999px; font-size:12.5px; font-weight:600; line-height:1.45; white-space:nowrap; }
.tarj .pill{ margin-top:8px; }
.pill.en_curso{ background:var(--p-curso-bg); color:var(--p-curso); }
.pill.planeacion{ background:var(--p-plan-bg); color:var(--p-plan); }
.pill.completado{ background:var(--p-hecho-bg); color:var(--p-hecho); }
.pill.archivado{ background:var(--p-arch-bg); color:var(--p-arch); }
.progreso{ display:flex; align-items:center; gap:12px; margin-top:9px; }
.pbar{ flex:1; height:6px; border-radius:3px; background:#e6ebf2; overflow:hidden; }
:root[data-tema="oscuro"] .pbar{ background:#243046; }
.pbar i{ display:block; height:100%; border-radius:3px; background:var(--p-curso); }
.pbar i.planeacion{ background:var(--p-plan); } .pbar i.completado{ background:var(--p-hecho); } .pbar i.archivado{ background:var(--p-arch); }
.progreso b{ font-size:13px; font-weight:600; min-width:34px; text-align:right; }
.vacio-tarj{ display:flex; gap:14px; align-items:center; background:var(--card); border:1px dashed var(--line2); border-radius:14px; padding:22px 18px; color:var(--ink-soft); font-size:14px; line-height:1.5; }
.vacio-tarj .ic{ width:32px; height:32px; stroke-width:1.5; color:var(--ink-mute); }

/* All Projects: en el teléfono, filas compactas (nombre + fecha, etapa y flechita). */
.tabla{ background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--sombra); }
.tcab{ display:none; }
.tfila{ display:grid; grid-template-columns:minmax(0,1fr) auto 22px; gap:10px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--line); cursor:pointer; }
.tfila:last-of-type{ border-bottom:0; }
.tfila:hover{ background:#f7faff; }
:root[data-tema="oscuro"] .tfila:hover{ background:#172238; }
.tn{ font-size:14.5px; font-weight:600; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tf-movil{ color:var(--ink-mute); font-size:12px; margin-top:2px; }
.tc-dir, .tc-fecha{ display:none; color:var(--ink-soft); font-size:15px; }
.tc-acc{ display:flex; justify-content:flex-end; color:var(--ink-mute); }
.tc-acc .mas-btn{ display:none; }
.chev-movil{ width:18px; height:18px; }
.tabla-mas{ display:block; width:100%; font:inherit; font-size:14.5px; font-weight:600; color:var(--accent); background:var(--card); border:0; border-top:1px solid var(--line); padding:12px; cursor:pointer; }
.tabla .vacio{ padding:24px 12px; }

/* ---------- GALLERY ---------- */
.gal-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:8px; }
.gal-foto{ position:relative; aspect-ratio:1 / 1; border:0; padding:0; border-radius:10px; overflow:hidden; background:var(--bg2); cursor:pointer; }
.gal-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.gal-nom{ position:absolute; left:0; right:0; bottom:0; padding:16px 8px 6px; font-size:11.5px; font-weight:600; color:#fff; text-align:left; background:linear-gradient(transparent, rgba(10,17,35,.65)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- MORE (teléfono) ---------- */
.mas-quien{ display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin:8px 0 14px; box-shadow:var(--sombra); }
.mas-quien .avatar{ width:46px; height:46px; font-size:16px; }
.mas-lista{ background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--sombra); margin-bottom:16px; }
.mas-item{ display:flex; align-items:center; gap:14px; width:100%; font:inherit; font-size:16px; font-weight:600; color:var(--ink); background:none; border:0; border-bottom:1px solid var(--line); padding:14px 16px; cursor:pointer; text-align:left; }
.mas-item:last-child{ border-bottom:0; }
.mas-item .chev-der{ margin-left:auto; color:var(--ink-mute); width:18px; height:18px; }
.mas-item .conteo{ margin-left:auto; }
.mas-item .conteo + .chev-der{ margin-left:8px; }
.salir-link{ display:inline-flex; align-items:center; gap:10px; font:inherit; font-size:16px; font-weight:600; color:var(--accent); background:none; border:0; padding:10px 6px; cursor:pointer; }
.quien-nom{ font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.quien-rol{ color:var(--ink-soft); font-size:13px; }

/* ---------- PRONTO (sección sin diseño todavía) ---------- */
.pronto{ max-width:520px; margin:24px auto; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:34px 24px; box-shadow:var(--sombra); }
.pronto-ic{ display:inline-grid; place-items:center; width:58px; height:58px; border-radius:16px; background:var(--accent-soft); color:var(--accent); margin-bottom:14px; }
.pronto-ic .ic{ width:28px; height:28px; }
.pronto p{ color:var(--ink-soft); line-height:1.55; margin:12px 0 20px; }

/* ---------- CAPTURE (hoja) y menú ••• ---------- */
.hoja{ position:absolute; inset:0; z-index:50; background:rgba(12,20,36,.38); display:flex; align-items:flex-end; justify-content:center; }
.hoja[hidden]{ display:none !important; }
.hoja-caja{ width:100%; max-height:78%; display:flex; flex-direction:column; background:var(--card); border-radius:18px 18px 0 0; box-shadow:0 -10px 40px rgba(10,17,35,.25); padding-bottom:env(safe-area-inset-bottom); }
.hoja-cab{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 10px; }
.hoja-cab h2{ margin:0; font-size:18px; font-weight:700; }
.cerrar-hoja{ width:36px; height:36px; border-radius:50%; border:0; background:var(--bg2); color:var(--ink-soft); font-size:16px; cursor:pointer; }
.hoja-lista{ overflow:auto; padding:0 10px 14px; }
.cap-fila{ display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 8px; border-radius:12px; cursor:pointer; }
.cap-fila:hover{ background:var(--bg2); }
.cap-foto{ width:52px; height:52px; border-radius:10px; overflow:hidden; background:var(--bg2); display:grid; place-items:center; color:var(--ink-mute); }
.cap-foto img{ width:100%; height:100%; object-fit:cover; }
.cap-texto{ min-width:0; display:flex; flex-direction:column; }
.cap-texto b{ font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cap-texto small{ color:var(--ink-soft); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cap-accion{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:#fff; background:var(--accent); border-radius:999px; padding:7px 13px; }
.cap-accion .ic{ width:17px; height:17px; }
.menu-pop{ position:absolute; z-index:55; min-width:190px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 36px rgba(10,17,35,.18); padding:6px; }
.menu-pop[hidden]{ display:none !important; }
.menu-pop button{ display:flex; align-items:center; gap:10px; width:100%; font:inherit; font-size:14.5px; font-weight:600; color:var(--ink); background:none; border:0; border-radius:8px; padding:9px 10px; cursor:pointer; text-align:left; }
.menu-pop button:hover{ background:var(--bg2); }
.menu-pop button .ic{ width:18px; height:18px; color:var(--ink-soft); }
.menu-pop button.rojo, .menu-pop button.rojo .ic{ color:var(--danger); }
.menu-nota{ padding:10px 12px; font-size:14px; color:var(--ink-soft); }

/* ---------- etiquetas de la ficha (tipo y estado) ---------- */
.etqs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; align-items:center; }
.etq{ display:inline-block; font-size:12.5px; font-weight:600; line-height:19px; padding:1px 8px; border-radius:4px; color:#fff; background:var(--chip-grey); white-space:nowrap; }
.etq.tipo-agua{ background:#2563eb; } .etq.tipo-moho{ background:#b51b2e; } .etq.tipo-fuego{ background:#e8590c; }
.etq.tipo-contenidos{ background:#6b4eff; } .etq.tipo-mudanza{ background:#0e9f6e; } .etq.tipo-otro{ background:#828c95; }
.etq.activo{ background:#16a34a; } .etq.archivado{ background:#2e3a4a; }
.foto-vacia{ width:64px; height:64px; border-radius:6px; background:var(--bg2); border:1px solid var(--line); flex:0 0 auto; }

/* ---------- FICHA DE UN TRABAJO ---------- */
.ficha-cab{ display:flex; gap:16px; align-items:flex-start; margin-bottom:14px; }
.portada{ width:96px; height:96px; border-radius:8px; background:var(--bg2); border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-mute); flex:0 0 auto; overflow:hidden; }
.portada .ic{ width:34px; height:34px; stroke-width:1.5; }
.ficha-datos{ min-width:0; }
.ficha-datos .titulo{ font-size:24px; }
.direccion{ display:inline-block; color:var(--ink-soft); font-size:15px; font-weight:500; text-decoration:underline; text-decoration-color:var(--ink-mute); text-underline-offset:3px; margin-top:6px; }
.enlace-editar{ font:inherit; font-size:14px; font-weight:600; color:var(--accent); background:none; border:0; padding:0 4px; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.enlace-editar .ic{ width:16px; height:16px; }
.acciones{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px; }
.acciones .btn{ flex:1 1 120px; }
.tabs{ display:flex; gap:22px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.tab-f{ font:inherit; font-size:16px; font-weight:600; color:var(--ink-soft); background:none; border:0; border-bottom:2px solid transparent; padding:8px 0 10px; margin-bottom:-1px; cursor:pointer; }
.tab-f.on{ color:var(--ink); border-bottom-color:var(--ink); }
.tab-f .n{ color:var(--ink-mute); font-weight:500; }
.tab-panel[hidden]{ display:none !important; }
.vacio-fotos{ display:flex; gap:14px; align-items:center; background:var(--card); border:1px dashed var(--line2); border-radius:12px; padding:22px 18px; color:var(--ink-soft); font-size:14px; line-height:1.5; }
.vacio-fotos .ic{ width:34px; height:34px; stroke-width:1.5; color:var(--ink-mute); }
.linea{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:15px; }
.linea span:first-child{ color:var(--ink-soft); }
.linea a{ color:var(--accent); text-decoration:none; font-weight:600; }

/* ---------- FOTOS ---------- */
.fsubir{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.fsubir .btn{ flex:1 1 150px; }
.ftanda{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:14px; font-size:14px; }
.ftanda-cab{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.ftanda-fila{ display:flex; justify-content:space-between; gap:10px; color:var(--ink-soft); padding:4px 0; border-top:1px solid var(--line); }
.ftanda-fila.fallo{ color:var(--danger); }
.ftanda-pie{ margin-top:8px; }
/* Lo que se está subiendo (su pedido del 14-oct: sin letreros, que pase detrás): solo las fotos, en una fila,
   con una marquita que gira mientras suben. Una que de verdad no se pudo lleva ! y se toca para reintentar. */
.fsube{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 0 12px; }
.fsube::-webkit-scrollbar{ display:none; }
.fsube-f{ position:relative; flex:none; width:56px; height:56px; padding:0; border:0; border-radius:8px; overflow:hidden; background:var(--bg2); cursor:default; }
.fsube-f img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.75; }
.fsube-f i{ position:absolute; right:4px; bottom:4px; width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.95); border-right-color:transparent; box-shadow:0 0 2px rgba(0,0,0,.35); animation:fsube-gira .8s linear infinite; }
.fsube-f.mal{ cursor:pointer; outline:2px solid var(--danger); outline-offset:-2px; }
.fsube-f.mal img{ opacity:1; }
.fsube-f.mal i{ animation:none; border:0; width:18px; height:18px; background:var(--danger); box-shadow:none; }
.fsube-f.mal i::after{ content:'!'; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font:800 12px/1 system-ui, sans-serif; font-style:normal; }
@keyframes fsube-gira{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .fsube-f i{ animation:none; } }
.fdia{ margin-bottom:18px; }
.fdia-t{ margin:0 0 10px; font-size:16px; font-weight:700; }
.fdia-t .n{ color:var(--ink-mute); font-weight:500; margin-left:6px; }
.fgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:8px; }
.ffoto{ position:relative; aspect-ratio:1 / 1; border:0; padding:0; border-radius:6px; overflow:hidden; background:var(--bg2); cursor:pointer; }
.ffoto img{ width:100%; height:100%; object-fit:cover; display:block; }
.ffoto-vacia{ display:block; width:100%; height:100%; background:var(--bg2); }
.fquien{ position:absolute; left:6px; bottom:6px; min-width:24px; height:24px; padding:0 6px; border-radius:12px; background:rgba(20,35,52,.75); color:#fff; font-size:11px; font-weight:700; display:inline-grid; place-items:center; }
.fquien:empty{ display:none; }
.foto-vacia img, .miniatura img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:6px; }
.visor{ position:absolute; inset:0; z-index:40; background:#0b111c; color:#fff; display:flex; flex-direction:column; }
.visor[hidden]{ display:none !important; }
.visor-cab{ display:flex; align-items:center; gap:12px; padding:10px 14px; padding-top:calc(10px + env(safe-area-inset-top)); font-size:14px; }
.visor-quien{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.visor-n{ color:#aab4c3; }
.visor-btn{ font:inherit; font-size:18px; color:#fff; background:rgba(255,255,255,.12); border:0; border-radius:50%; width:40px; height:40px; display:grid; place-items:center; cursor:pointer; flex:0 0 auto; }
.visor-cuerpo{ flex:1; min-height:0; position:relative; display:flex; align-items:center; justify-content:center; }
.visor-cuerpo img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.visor-ant, .visor-sig{ position:absolute; top:50%; transform:translateY(-50%); }
.visor-ant{ left:10px; } .visor-sig{ right:10px; }
.visor-sig .ic{ transform:scaleX(-1); }
.visor-pie{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); font-size:14px; color:#dfe5ee; }
.visor-pie .btn{ background:transparent; color:#ff8a8a; border-color:rgba(255,255,255,.25); }
.app{ position:relative; }

/* ---------- PERSONAS ---------- */
.bloque{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:4px 16px 8px; margin:14px 0; }
.bloque-t{ margin:12px 0 4px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.persona{ display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; padding:12px 0; border-bottom:1px solid var(--line); align-items:center; }
.persona:last-child{ border-bottom:0; }
.persona .avatar{ width:40px; height:40px; font-size:14px; }
.persona .nom{ font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.persona .sub{ color:var(--ink-soft); font-size:13px; margin-top:2px; }
.persona-acciones{ grid-column:1 / -1; display:flex; gap:8px; }
.persona-acciones .btn{ flex:1 1 0; min-height:40px; }
.estado-chip{ display:inline-block; padding:1px 8px; border-radius:4px; font-size:12px; font-weight:600; background:var(--accent-soft); color:var(--accent); }
.estado-chip.pausado{ background:var(--warn-soft); color:#8a6508; }
.estado-chip.sacado{ background:var(--danger-soft); color:var(--danger); }

/* ---------- FORMA ---------- */
.forma{ max-width:720px; }
.forma-grid{ display:grid; grid-template-columns:1fr; gap:0 16px; }

/* ---------- ENTRADA ---------- */
.entrar{ min-height:100%; display:flex; align-items:center; justify-content:center; padding:24px 16px calc(24px + env(safe-area-inset-bottom)); }
.entrar-caja{ width:100%; max-width:440px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:30px 24px 22px; box-shadow:var(--sombra); }
.entrar-caja.centrado{ text-align:center; }
.marca{ text-align:center; margin-bottom:22px; }
.marca .logo{ width:60px; height:60px; margin:0 auto 10px; }
.marca-nombre{ font-size:28px; font-weight:800; letter-spacing:-.02em; }
.marca-lema{ color:var(--ink-soft); font-size:14px; margin-top:4px; }
.clave{ position:relative; }
.clave input{ padding-right:64px; }
.ojo{ position:absolute; right:6px; top:50%; transform:translateY(-50%); font:inherit; font-size:13px; font-weight:600; color:var(--accent); background:var(--accent-soft); border:none; border-radius:6px; padding:6px 10px; cursor:pointer; }
.enlace-suave{ display:block; text-align:center; color:var(--ink-soft); font-size:14px; text-decoration:none; margin-top:14px; }
.enlace-suave:hover{ color:var(--accent); }
.entrar-pie{ text-align:center; color:var(--ink-mute); font-size:12px; margin:22px 0 0; }
.entrar-crear{ text-align:center; color:var(--ink-soft); font-size:15px; margin:16px 0 0; }
.entrar-crear a{ color:var(--accent); font-weight:700; text-decoration:none; }

/* ---------- COMPUTADORA (900px o mas): la barra lateral clara del diseño ---------- */
@media (min-width:900px){
  .lateral{ display:flex; flex-direction:column; width:258px; flex:0 0 258px; background:var(--lat); border-right:1px solid var(--line); padding:30px 18px 22px; overflow:auto; }
  .lat-logo{ font-size:36px; padding:0 14px 34px; }
  .navitem{ display:flex; align-items:center; gap:16px; width:100%; font:inherit; font-size:16px; font-weight:500; color:var(--lat-ink); background:transparent; border:0; border-radius:10px; padding:13px 16px; cursor:pointer; text-align:left; margin-bottom:8px; }
  .navitem .ic{ width:24px; height:24px; }
  .navitem:hover{ background:var(--accent-soft); }
  .navitem.on{ background:linear-gradient(90deg,#4d8cf8,#2f6fe9); color:#fff; box-shadow:0 8px 18px rgba(47,111,233,.28); }
  .navitem .chev{ margin-left:auto; width:18px; height:18px; color:var(--ink-mute); }
  .navitem.on .chev{ color:#fff; }
  .navitem .conteo{ margin-left:auto; }
  .lateral-espacio{ flex:1; }
  .lateral-quien{ display:flex; align-items:center; gap:12px; padding:14px 10px 10px; }
  .lateral-quien .avatar{ width:44px; height:44px; font-size:15px; }
  .quien-texto{ min-width:0; }
  .lateral .salir-link{ padding:10px 12px; }
  .tope{ justify-content:flex-end; gap:14px; padding:24px 44px 4px; }
  .tope-logo{ display:none; }
  .tope-buscar{ display:block; position:relative; width:340px; }
  .tope-buscar .ic{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:19px; height:19px; color:var(--ink-soft); }
  .tope-buscar input{ width:100%; font:inherit; font-size:14.5px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:10px; height:46px; padding:0 14px 0 44px; box-shadow:0 1px 3px rgba(16,40,80,.06); }
  .tope-buscar input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.18); }
  .avatar-tope{ width:46px; height:46px; font-size:16px; }
  .pie{ display:none !important; }
  main{ padding:8px 44px 48px; }
  .pantalla{ max-width:1180px; margin:0 auto; }
  .titulo{ font-size:36px; }
  .titulo.chico{ font-size:26px; }
  .solo-escritorio{ display:inline; }
  .bienv{ margin:18px 0 34px; }
  .bienv-t{ font-size:42px; }
  .bienv-sub{ font-size:19px; margin-top:12px; }
  .bienv-fecha{ display:block; }
  .sec-cab{ margin-bottom:16px; flex-wrap:nowrap; }
  .sec-t{ font-size:21px; }
  .ver-todo{ font-size:18px; }
  .icono-btn{ display:none; }
  .sec-herr, .sec-herr.abierto{ display:flex; flex-direction:row; width:auto; gap:14px; }
  .sec-herr .sel{ width:170px; } .sec-herr .buscar{ width:240px; }
  .recientes{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; margin-bottom:38px; }
  .tarj{ display:block; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--sombra); transition:transform .15s, box-shadow .15s; }
  .tarj:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(16,40,80,.06), 0 14px 30px rgba(16,40,80,.10); }
  .tarj-foto{ height:auto; aspect-ratio:16 / 7.6; border-radius:0; }
  .mas-btn.flot{ display:grid; }
  .tarj-cuerpo{ padding:18px 16px 18px; }
  .tarj-nom{ font-size:17px; }
  .tarj-dir{ font-size:15px; margin-top:6px; }
  .tarj-fecha{ font-size:15px; margin-top:4px; }
  .tarj .pill{ margin-top:12px; font-size:13.5px; }
  .progreso{ margin-top:10px; } .progreso b{ font-size:14px; }
  .tcab, .tfila{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1.6fr) minmax(0,.95fr) minmax(0,1fr) 52px; gap:16px; align-items:center; padding:0 20px; }
  .tcab{ height:52px; background:#f7f9fc; border-bottom:1px solid var(--line); }
  :root[data-tema="oscuro"] .tcab{ background:#172238; }
  .tc-orden{ display:inline-flex; align-items:center; gap:4px; font:inherit; font-size:15px; font-weight:600; color:var(--ink); background:none; border:0; padding:0; cursor:pointer; justify-self:start; }
  .tc-orden .ic{ width:15px; height:15px; color:var(--ink-mute); }
  .tc-orden.on .ic{ color:var(--accent); }
  .tfila{ min-height:56px; }
  .tn{ font-size:15.5px; font-weight:500; }
  .tf-movil{ display:none; }
  .tc-dir, .tc-fecha{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tc-est .pill{ font-size:14px; padding:4px 12px; }
  .tc-acc .mas-btn{ display:grid; }
  .chev-movil{ display:none; }
  .gal-grid{ grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:12px; }
  .hoja{ align-items:center; }
  .hoja-caja{ max-width:520px; border-radius:18px; max-height:70%; }
  .titulo{ font-size:36px; }
  .titulo.chico{ font-size:26px; }
  .solo-escritorio{ display:inline; }
  .fila-botones{ justify-content:flex-end; }
  .fila-botones .btn{ flex:0 0 auto; min-width:120px; }
  .forma-grid{ grid-template-columns:1fr 1fr; }
  .forma-grid .ancho{ grid-column:1 / -1; }
  .ficha-cab{ gap:28px; margin-bottom:18px; }
  .portada{ width:148px; height:148px; }
  .ficha-datos .titulo{ font-size:34px; }
  .acciones .btn{ flex:0 0 auto; min-width:120px; }
  .persona{ grid-template-columns:40px minmax(0,1fr) auto; }
  .persona-acciones{ grid-column:auto; }
  .persona-acciones .btn{ flex:0 0 auto; min-width:110px; }
  .entrar-caja{ padding:36px 36px 26px; }
  .entrar-caja{ padding:36px 36px 26px; }
}
@media (min-width:900px) and (max-width:1180px){
  .tcab, .tfila{ grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,.9fr) minmax(0,1fr) 46px; padding:0 14px; gap:12px; }
  main{ padding:8px 28px 40px; } .tope{ padding:20px 28px 4px; }
}

/* ---------- ENTRAR COMO VENTANA EMERGENTE sobre la bienvenida ---------- */
.cerrar-modal{ display:none; }
body.modal-entrar .app{ position:absolute; inset:0; z-index:70; background:rgba(12,20,36,.40); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); animation:sc-velo .22s ease-out; }
body.modal-entrar .entrar{ cursor:default; }
body.modal-entrar .entrar-caja{ position:relative; border-color:transparent; box-shadow:0 30px 80px rgba(10,17,35,.32), 0 4px 14px rgba(10,17,35,.12); animation:sc-aparece .28s cubic-bezier(.2,.8,.2,1); }
body.modal-entrar .cerrar-modal{ display:grid; place-items:center; position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:0; background:var(--bg2); color:var(--ink-soft); cursor:pointer; }
body.modal-entrar .cerrar-modal:hover{ background:var(--line); color:var(--ink); }
.cerrar-modal svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
@keyframes sc-velo{ from{ opacity:0; } to{ opacity:1; } }
@keyframes sc-aparece{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ body.modal-entrar .app, body.modal-entrar .entrar-caja{ animation:none; } }

/* ---------- CONTINUAR CON GOOGLE (solo aparece si Google está activado en Supabase) ---------- */
.g-solo[hidden]{ display:none !important; }
.o{ display:flex; align-items:center; gap:12px; color:var(--ink-mute); font-size:13px; margin:16px 0 12px; }
.o::before, .o::after{ content:""; flex:1; height:1px; background:var(--line); }
.btn-google{ background:#fff; color:#1f1f1f; border:1px solid var(--line2); font-weight:600; }
.btn-google:hover{ background:#f6f8fb; }
.g-logo{ width:20px; height:20px; flex:0 0 auto; }

/* ---------- LA CAMARA DE SCANOVA (muchas fotos seguidas) ---------- */
.camara{ position:absolute; inset:0; z-index:80; background:#000; color:#fff; overflow:hidden; }
.camara[hidden]{ display:none !important; }
.camara video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.cam-flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
.cam-flash.on{ animation:cam-flash .28s ease-out; }
@keyframes cam-flash{ from{ opacity:.85; } to{ opacity:0; } }
.cam-arriba{ position:absolute; left:0; right:0; top:0; display:flex; align-items:center; gap:12px; padding:calc(12px + env(safe-area-inset-top)) 16px 30px; background:linear-gradient(rgba(0,0,0,.55), transparent); }
.cam-x{ width:42px; height:42px; border-radius:50%; border:0; background:rgba(255,255,255,.18); color:#fff; font-size:18px; cursor:pointer; flex:0 0 auto; }
.cam-titulo{ min-width:0; display:flex; flex-direction:column; }
.cam-titulo small{ font-size:12px; opacity:.8; }
.cam-titulo b{ font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cam-abajo{ position:absolute; left:0; right:0; bottom:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:26px 22px calc(18px + env(safe-area-inset-bottom)); background:linear-gradient(transparent, rgba(0,0,0,.6)); }
.cam-ultima{ position:relative; justify-self:start; width:54px; height:54px; border-radius:12px; overflow:hidden; border:2px solid #fff; }
.cam-ultima[hidden]{ display:block !important; visibility:hidden; }
.cam-ultima img{ width:100%; height:100%; object-fit:cover; display:block; }
.cam-ultima b{ position:absolute; right:3px; bottom:3px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:#2563eb; font-size:11.5px; line-height:20px; text-align:center; }
.cam-disparo{ width:78px; height:78px; border-radius:50%; border:4px solid #fff; background:transparent; padding:5px; cursor:pointer; }
.cam-disparo span{ display:block; width:100%; height:100%; border-radius:50%; background:#fff; transition:transform .08s; }
.cam-disparo:active span{ transform:scale(.88); }
.cam-disparo[disabled]{ opacity:.4; }
.cam-listo{ justify-self:end; font:inherit; font-size:16px; font-weight:700; color:#fff; background:#2563eb; border:0; border-radius:999px; padding:11px 20px; cursor:pointer; }
.cam-conteo{ grid-column:1 / -1; text-align:center; font-size:13.5px; font-weight:600; margin-top:12px; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.cam-error{ position:absolute; left:20px; right:20px; top:50%; transform:translateY(-50%); background:#fff; color:var(--ink); border-radius:16px; padding:20px; text-align:center; display:flex; flex-direction:column; gap:10px; }
.cam-error[hidden]{ display:none !important; }
.cam-error p{ margin:0 0 6px; line-height:1.5; }

/* ---------- LA DIRECCION: sugerencias y el 📍 dentro del campo (como CompanyCam) ---------- */
.dir-campo{ position:relative; }
.dir-campo input{ padding-right:52px !important; }
.dir-ubicar{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:8px; border:0; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; cursor:pointer; }
.dir-ubicar:hover{ background:var(--accent); color:#fff; }
.dir-ubicar.busy .ic{ animation:dir-gira 1s linear infinite; }
@keyframes dir-gira{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .dir-ubicar.busy .ic{ animation:none; opacity:.5; } }
.dir-sug{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 34px rgba(10,17,35,.16); padding:6px; max-height:300px; overflow:auto; }
.dir-sug[hidden]{ display:none !important; }
.dir-op{ display:flex; align-items:flex-start; gap:10px; width:100%; font:inherit; text-align:left; color:var(--ink); background:none; border:0; border-radius:8px; padding:9px 10px; cursor:pointer; }
.dir-op:hover, .dir-op.on{ background:var(--bg2); }
.dir-op .ic{ width:18px; height:18px; color:var(--accent); margin-top:2px; }
.dir-op span{ min-width:0; display:flex; flex-direction:column; }
.dir-op b{ font-size:14.5px; font-weight:600; }
.dir-op small{ color:var(--ink-soft); font-size:12.5px; margin-top:1px; }
.dir-nota{ margin:6px 0 0; font-size:13px; color:var(--ink-soft); min-height:0; }
.dir-nota:empty{ display:none; }
.dir-nota.error{ color:var(--danger); }

/* ---------- LA FICHA DEL PROYECTO (diseño de Amilcar, 12 oct): encabezado + pestañas + niveles y cuartos ---------- */
.solo-compu{ display:none !important; }
.pcab{ display:grid; grid-template-columns:88px minmax(0,1fr) auto; gap:14px; align-items:start; margin:4px 0 16px; }
.pcab .portada{ width:88px; height:88px; border-radius:12px; }
.pcab-datos{ min-width:0; display:flex; flex-direction:column; gap:5px; }
.pcab-t{ margin:0; font-size:21px; font-weight:800; letter-spacing:-.02em; line-height:1.15; overflow-wrap:anywhere; }
.pcab-dir{ color:var(--ink-soft); font-size:14px; text-decoration:none; overflow-wrap:anywhere; }
.pcab-dir:hover{ text-decoration:underline; }
.pcab-meta{ color:var(--ink-soft); font-size:13px; line-height:1.4; }
.pcab-meta{ display:flex; flex-wrap:wrap; align-items:baseline; }
.pcab-meta .pm-i{ white-space:nowrap; }
.pcab-meta .sep{ color:var(--line2); margin:0 8px; }
.pcab-acc{ display:flex; gap:8px; align-items:center; }
.mas-cab{ width:40px; height:40px; }
.ptabs{ display:flex; gap:22px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--line); margin:0 -16px 16px; padding:0 16px; }
.ptabs::-webkit-scrollbar{ display:none; }
.ptab{ flex:0 0 auto; font:inherit; font-size:15px; font-weight:600; color:var(--ink-soft); background:none; border:0; border-bottom:2px solid transparent; padding:10px 0 11px; margin-bottom:-1px; cursor:pointer; white-space:nowrap; }
.ptab.on{ color:var(--accent); border-bottom-color:var(--accent); }
.ptab .n{ color:var(--ink-mute); font-weight:500; }
.ptab.on .n{ color:var(--accent); }
.subtabs{ display:grid; grid-template-columns:1fr 1fr; background:var(--bg2); border-radius:10px; padding:4px; margin-bottom:14px; }
.subtab{ font:inherit; font-size:14.5px; font-weight:600; color:var(--ink-soft); background:none; border:0; border-radius:8px; padding:9px 0; cursor:pointer; }
.subtab.on{ background:var(--card); color:var(--accent); box-shadow:0 1px 3px rgba(16,40,80,.12); }
.sin-cuartos{ text-align:center; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:34px 20px 22px; display:flex; flex-direction:column; align-items:center; gap:10px; max-width:460px; margin:0 auto; }
.sin-cuartos > .ic{ width:54px; height:54px; padding:12px; border-radius:16px; background:var(--accent-soft); color:var(--accent); stroke-width:1.6; }
.sin-cuartos h3{ margin:6px 0 0; font-size:18px; }
.sin-cuartos p{ margin:0 0 8px; color:var(--ink-soft); line-height:1.5; font-size:14.5px; }
.btn-suave{ background:var(--accent-soft); color:var(--accent); }
.btn-suave:hover{ background:var(--accent); color:#fff; }
.btn-chico{ min-height:36px; padding:0 12px; font-size:14px; }
.btn-chico.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.plista{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.pfila{ display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:12px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px 8px 8px 8px; cursor:pointer; }
.pfila:hover{ border-color:var(--line2); }
.pfila-mini{ width:52px; height:52px; border-radius:10px; overflow:hidden; background:var(--bg2); display:grid; place-items:center; color:var(--ink-mute); }
.pfila-mini img{ width:100%; height:100%; object-fit:cover; }
.pfila-txt{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.pfila-txt b{ font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pfila-txt small{ color:var(--ink-soft); font-size:13px; }
.pfila .chev-der{ color:var(--ink-mute); margin-right:6px; }
.psel{ margin-bottom:12px; }
.chips{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.chips::-webkit-scrollbar{ display:none; }
.chips.envolver{ flex-wrap:wrap; overflow:visible; }
.chip{ flex:0 0 auto; font:inherit; font-size:14px; font-weight:600; color:var(--ink); background:var(--card); border:1px solid var(--line2); border-radius:999px; padding:8px 14px; cursor:pointer; white-space:nowrap; }
.chip:hover{ border-color:var(--accent); }
.chip.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.chip.usado:not(.on){ color:var(--ink-mute); }
.pherr{ display:flex; flex-direction:column; gap:10px; margin:4px 0 14px; }
.pherr-der{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pherr-der .sel select{ height:36px; font-size:14px; padding:0 34px 0 12px; }
.pherr-der .sel .ic{ width:16px; height:16px; right:10px; }
.psel-cuarto{ flex:1 1 150px; }
.vistas{ display:flex; border:1px solid var(--line2); border-radius:10px; overflow:hidden; }
.vista{ width:38px; height:34px; display:grid; place-items:center; background:var(--card); color:var(--ink-soft); border:0; cursor:pointer; }
.vista + .vista{ border-left:1px solid var(--line2); }
.vista.on{ background:var(--accent-soft); color:var(--accent); }
.vista .ic{ width:18px; height:18px; }
.psub{ margin:4px 0 10px; font-size:16px; font-weight:700; }
.pdestino{ display:flex; align-items:center; gap:6px; margin:-4px 0 12px; font-size:13px; color:var(--ink-soft); }
.pdestino .ic{ width:15px; height:15px; color:var(--accent); }
.pdestino b{ color:var(--ink); }
.psel-barra{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--accent-soft); border-radius:12px; padding:8px 10px; margin-bottom:12px; }
.psel-barra b{ margin-right:auto; font-size:14px; color:var(--accent); }
/* Una sola fila (14-oct): si no caben, se desliza de lado, nunca se parte en dos renglones. */
.psel-barra{ flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; touch-action:pan-x pan-y; scrollbar-width:none; }
.psel-barra::-webkit-scrollbar{ display:none; }
.psel-barra .btn{ flex:1 1 auto; min-width:0; white-space:nowrap; padding:0 10px; gap:6px; }
.ptitulo{ margin-top:6px; }
.ptitulo .sec-t{ font-size:17px; }
.ver-cuarto{ font:inherit; font-size:14px; font-weight:600; color:var(--accent); background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:2px; padding:4px 0; }
.ver-cuarto .ic{ width:16px; height:16px; }
.pgrid.grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.pgrid.lista{ display:flex; flex-direction:column; gap:8px; }
.pfoto{ position:relative; min-width:0; }
.pfoto .ffoto{ width:100%; aspect-ratio:4 / 3; border-radius:10px; display:block; }
.pfoto-check{ position:absolute; top:8px; left:8px; width:24px; height:24px; border-radius:50%; border:2px solid #fff; background:rgba(0,0,0,.25); display:none; place-items:center; color:#fff; }
.pfoto-check .ic{ width:15px; height:15px; stroke-width:3; }
.pmodo-sel .pfoto-check{ display:grid; }
.pfoto.sel .pfoto-check{ background:var(--accent); border-color:var(--accent); }
.pfoto.sel .ffoto{ outline:3px solid var(--accent); outline-offset:-3px; }
.pfoto-pie{ display:flex; align-items:flex-start; gap:4px; padding:7px 0 0 2px; }
.pfoto-txt{ min-width:0; flex:1; display:flex; flex-direction:column; }
.pfoto-txt b{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pfoto-txt small{ color:var(--ink-soft); font-size:12px; }
.pfoto-pie .mas-btn{ width:30px; height:30px; margin-top:-3px; }
.pgrid.lista .pfoto{ display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:6px; }
.pgrid.lista .ffoto{ aspect-ratio:1 / 1; border-radius:8px; }
.pgrid.lista .pfoto-pie{ padding:0; align-items:center; }
.pgrupo{ margin-bottom:18px; }
.pgrupo h4{ margin:0 0 10px; font-size:15px; font-weight:700; }
.pgrupo h4 .n{ color:var(--ink-mute); font-weight:500; margin-left:4px; }
/* "Select" junto al nombre de cada grupo de fotos (13-oct). */
.pgrupo-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px; }
.pgrupo .pgrupo-cab h4{ margin:0; }
.pgrupo-sel{ flex:none; }
.pgrupo-sel.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.ptitulo .pgrupo-sel{ margin-left:8px; }
.pnotas textarea{ width:100%; min-height:180px; font:inherit; font-size:16px; color:var(--ink); background:var(--card); border:1px solid var(--line2); border-radius:10px; padding:10px 12px; resize:vertical; margin:8px 0 12px; }
.pnotas textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.18); }
.pact{ position:relative; padding-left:20px; }
.pact::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--line); }
.pact-fila{ position:relative; padding:0 0 18px; }
.pact-punto{ position:absolute; left:-20px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--card); }
.pact-fila b{ display:block; font-size:14.5px; font-weight:600; }
.pact-fila small{ color:var(--ink-soft); font-size:12.5px; }
.pronto-tab{ margin:8px auto; }
.pforma{ max-width:560px; }
.hoja-cuarto{ z-index:90; }
.cuarto-nivel{ margin:12px 8px 4px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); }
.cuarto-op{ width:100%; font:inherit; text-align:left; color:var(--ink); background:none; border:0; }
.cuarto-op.on{ background:var(--accent-soft); }
.cuarto-op.on b{ color:var(--accent); }
.cam-cuarto{ margin-left:auto; flex:0 1 auto; min-width:0; max-width:52%; display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:13.5px; font-weight:700; color:#fff; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:7px 10px 7px 12px; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.cam-cuarto[hidden]{ display:none !important; }
.cam-cuarto span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cam-cuarto .ic{ width:16px; height:16px; }
@media (min-width:900px){
  .solo-compu{ display:inline-flex !important; }
  .solo-movil{ display:none !important; }
  .pcab{ grid-template-columns:150px minmax(0,1fr) auto; gap:24px; margin-bottom:18px; }
  .pcab .portada{ width:150px; height:110px; }
  .pcab-t{ font-size:27px; }
  .pcab-dir{ font-size:15px; }
  .pcab-meta{ font-size:14px; }
  .ptabs{ margin:0 0 18px; padding:0; gap:30px; }
  .ptab{ font-size:15.5px; }
  .pherr{ flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; }
  .pherr .chips{ flex:1 1 420px; min-width:0; }
  .pcab-acc .icono-btn{ display:grid; }
  .pherr-der{ flex:0 0 auto; flex-wrap:nowrap; }
  .psel-cuarto{ flex:0 0 170px; }
  .pgrid.grid{ grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:16px; }
  .sin-cuartos .btn{ max-width:320px; }
}

/* ---------- AJUSTES DE SU SEGUNDA IMAGEN (12 oct): etiquetas, Project Details, menú del teléfono ---------- */
/* El menú del teléfono: la barra lateral entra desde la izquierda. */
.tope-menu{ margin-left:-8px; }
.menu-velo{ display:none; }
body.menu-abierto .menu-velo{ display:block; position:absolute; inset:0; z-index:65; background:rgba(12,20,36,.38); }
@media (max-width:899px){
  body.menu-abierto .lateral{ display:flex; flex-direction:column; position:absolute; top:0; left:0; bottom:0; z-index:66; width:min(290px, 84vw); background:var(--lat); padding:calc(22px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom)); overflow:auto; box-shadow:12px 0 40px rgba(10,17,35,.22); animation:sc-entra-izq .2s ease-out; }
  .lateral .lat-logo{ font-size:28px; padding:0 12px 24px; }
  .lateral .navitem{ display:flex; align-items:center; gap:14px; width:100%; font:inherit; font-size:16px; font-weight:500; color:var(--lat-ink); background:transparent; border:0; border-radius:10px; padding:12px 14px; cursor:pointer; text-align:left; margin-bottom:4px; }
  .lateral .navitem .ic{ width:22px; height:22px; }
  .lateral .navitem.on{ background:linear-gradient(90deg,#4d8cf8,#2f6fe9); color:#fff; }
  .lateral .navitem .chev{ display:none; }
  .lateral .navitem .conteo{ margin-left:auto; }
  .lateral .lateral-espacio{ flex:1; min-height:16px; }
  .lateral .lateral-quien{ display:flex; align-items:center; gap:12px; padding:12px 10px 6px; }
  .largo{ display:none; }
}
@keyframes sc-entra-izq{ from{ transform:translateX(-100%); } to{ transform:none; } }
@keyframes sc-entra-der{ from{ transform:translateX(100%); } to{ transform:none; } }
@media (prefers-reduced-motion:reduce){ body.menu-abierto .lateral, .cajon-caja{ animation:none !important; } }

/* Etiquetas de color del proyecto (Active · Flood Doctor Contract · Google Drive · In Progress). */
.pcab-etqs{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:2px 0 2px; }
.etq-c{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:6px; font-size:12.5px; font-weight:700; line-height:1.45; color:#fff; white-space:nowrap; border:0; font-family:inherit; }
.etq-c.c-verde{ background:#16a34a; } .etq-c.c-azul{ background:#2563eb; } .etq-c.c-amarillo{ background:#facc15; color:#3b2f00; }
.etq-c.c-naranja{ background:#ea580c; } .etq-c.c-rojo{ background:#dc2626; } .etq-c.c-morado{ background:#7c3aed; } .etq-c.c-gris{ background:#6b7280; }
.etq-c button{ font:inherit; color:inherit; background:rgba(0,0,0,.18); border:0; border-radius:50%; width:18px; height:18px; display:grid; place-items:center; font-size:10px; cursor:pointer; padding:0; }
.pcab-etqs .enlace-editar{ margin-left:4px; }
.solo-movil-i{ align-self:flex-start; padding:2px 0; }
.corto{ display:inline; }
.etq-nota{ margin:0 0 12px; color:var(--ink-soft); font-size:13.5px; line-height:1.45; }
.etq-lista{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.etq-sug{ cursor:pointer; opacity:.9; }
.etq-sub{ margin:4px 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-mute); }
.etq-nueva{ display:flex; gap:8px; margin-bottom:10px; }
.etq-nueva input{ flex:1; min-width:0; font:inherit; font-size:16px; height:40px; border:1px solid var(--line2); border-radius:10px; padding:0 12px; background:var(--card); color:var(--ink); }
.etq-colores{ display:flex; gap:10px; margin-bottom:16px; }
.etq-color{ width:30px; height:30px; border-radius:50%; border:3px solid var(--card); box-shadow:0 0 0 1px var(--line2); cursor:pointer; padding:0; }
.etq-color.on{ box-shadow:0 0 0 2px var(--ink); }
.etq-color.c-verde{ background:#16a34a; } .etq-color.c-azul{ background:#2563eb; } .etq-color.c-amarillo{ background:#facc15; } .etq-color.c-naranja{ background:#ea580c; } .etq-color.c-rojo{ background:#dc2626; } .etq-color.c-morado{ background:#7c3aed; } .etq-color.c-gris{ background:#6b7280; }
.hoja-forma{ padding:4px 18px 18px; }
.hoja-det{ z-index:70; }

/* La barra de las fotos: en el teléfono [nivel ▾][▦ ☰][Newest ▾] / [cuarto ▾][Select][Upload Photos]. */
.pherr{ display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; align-items:center; }
.pherr .sel select{ height:38px; font-size:14px; padding:0 34px 0 12px; }
.pherr .sel .ic{ width:16px; height:16px; right:10px; }
.pchips{ display:none; }
.psel-nivel{ order:1; flex:1 1 130px; min-width:0; }
.pherr .vistas{ order:2; }
.psel-orden{ order:3; }
.pherr-salto{ order:4; flex-basis:100%; height:0; }
.pherr .psel-cuarto{ order:5; flex:1 1 80px; min-width:0; }
.psel-btn{ order:6; }
.subir-btn{ order:7; margin-left:auto; min-height:38px; }
/* "By Level" en la misma fila que Upload Photos (su pedido del 15-oct): ocupa el hueco de la izquierda. */
.pherr .pherr-titulo{ order:6; margin:0; flex:1 1 auto; min-width:0; align-self:center; }
.subir-btn .ic{ width:18px; height:18px; }
.pherr .vista{ height:36px; }

/* Project Details: panel de la derecha (computadora) o cajón (teléfono). */
.pdet-lado{ display:none; }
.cajon{ position:absolute; inset:0; z-index:62; }
.cajon[hidden]{ display:none !important; }
.cajon-velo{ position:absolute; inset:0; background:rgba(12,20,36,.42); }
.cajon-caja{ position:absolute; top:0; right:0; bottom:0; width:min(370px, 88vw); background:var(--bg2); overflow:auto; -webkit-overflow-scrolling:touch; padding:calc(12px + env(safe-area-inset-top)) 12px calc(20px + env(safe-area-inset-bottom)); box-shadow:-12px 0 40px rgba(10,17,35,.25); animation:sc-entra-der .2s ease-out; }
.pdet{ display:flex; flex-direction:column; gap:10px; }
.pdet-cab{ display:flex; align-items:center; justify-content:space-between; padding:4px 4px 2px; }
.pdet-cab h2{ margin:0; font-size:19px; font-weight:800; letter-spacing:-.01em; }
.pdet-cerrar{ width:36px; height:36px; border-radius:10px; border:0; background:transparent; color:var(--ink); font-size:20px; cursor:pointer; }
.pdet-cerrar:hover{ background:var(--card); }
.pdet-card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 14px 12px; }
.pdet-t{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.pdet-t h3{ margin:0; font-size:15.5px; font-weight:700; }
.pdet-ed{ width:30px; height:30px; border-radius:8px; border:0; background:transparent; color:var(--accent); display:grid; place-items:center; cursor:pointer; flex:0 0 auto; }
.pdet-ed:hover{ background:var(--accent-soft); }
.pdet-ed .ic{ width:19px; height:19px; }
.pdet-cliente{ display:flex; gap:12px; align-items:flex-start; }
.pdet-persona{ width:44px; height:44px; border-radius:50%; background:var(--bg2); color:var(--ink-soft); display:grid; place-items:center; flex:0 0 auto; }
.pdet-persona .ic{ width:24px; height:24px; }
.pdet-cliente div{ min-width:0; display:flex; flex-direction:column; gap:2px; font-size:14px; color:var(--ink-soft); }
.pdet-cliente b{ color:var(--ink); font-size:15px; }
.pdet-cliente a, .pdet-colab a{ color:var(--accent); text-decoration:none; font-weight:600; font-size:13.5px; }
.pdet-avs{ display:flex; flex-wrap:wrap; gap:8px; }
.pdet-av{ width:40px; height:40px; border-radius:50%; background:var(--bg2); border:1px solid var(--line); color:var(--ink); display:inline-grid; place-items:center; font-size:13px; font-weight:700; flex:0 0 auto; }
.pdet-av.chico{ width:32px; height:32px; font-size:11.5px; }
.pdet-vacio{ margin:0; color:var(--ink-mute); font-size:13.5px; line-height:1.45; }
.pdet-texto{ margin:0; color:var(--ink-soft); font-size:14px; line-height:1.5; white-space:pre-wrap; }
.pdet-link{ display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:14.5px; font-weight:600; color:var(--accent); background:none; border:0; padding:4px 0; cursor:pointer; }
.pdet-link .ic{ width:19px; height:19px; }
.pdet-colab{ display:flex; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid var(--line); }
.pdet-colab div{ min-width:0; display:flex; flex-direction:column; gap:1px; font-size:14px; }
.pdet-colab small{ color:var(--ink-soft); }
.pdet-x{ width:26px; height:26px; border-radius:6px; border:0; background:transparent; color:var(--ink-mute); cursor:pointer; flex:0 0 auto; font-size:13px; }
.pdet-x:hover{ background:var(--danger-soft); color:var(--danger); }
.pdet-area{ width:100%; min-height:90px; font:inherit; font-size:15px; color:var(--ink); background:var(--card); border:1px solid var(--line2); border-radius:10px; padding:8px 10px; resize:vertical; }
.pdet-fila{ display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.pdet-tarea{ display:flex; align-items:flex-start; gap:6px; padding:6px 0; }
.pdet-tarea label{ flex:1; display:flex; gap:10px; align-items:flex-start; font-size:14.5px; cursor:pointer; line-height:1.4; }
.pdet-tarea input{ width:18px; height:18px; margin:1px 0 0; accent-color:var(--accent); flex:0 0 auto; }
.pdet-tarea.hecha span{ color:var(--ink-mute); text-decoration:line-through; }
.pdet-nueva{ display:flex; gap:8px; margin-top:6px; }
.pdet-nueva input, .pdet-escribir input{ flex:1; min-width:0; font:inherit; font-size:16px; height:40px; border:1px solid var(--line2); border-radius:10px; padding:0 12px; background:var(--card); color:var(--ink); }
.pdet-coms{ max-height:320px; overflow:auto; display:flex; flex-direction:column; gap:12px; margin-bottom:10px; }
.pdet-com{ display:flex; gap:10px; }
.pdet-com-cuerpo{ min-width:0; flex:1; }
.pdet-com-cab{ display:flex; align-items:center; gap:8px; }
.pdet-com-cab b{ font-size:14px; }
.pdet-com-cab small{ color:var(--ink-mute); font-size:12px; margin-right:auto; }
.pdet-com p{ margin:2px 0 0; font-size:14px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.pdet-escribir{ position:relative; display:flex; margin-bottom:8px; }
.pdet-escribir input{ padding-right:44px; }
.pdet-arroba{ position:absolute; right:4px; top:4px; width:32px; height:32px; border-radius:50%; border:0; background:transparent; color:var(--accent); font:inherit; font-size:18px; font-weight:700; cursor:pointer; }
.pdet-arroba-lista{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.pdet-arroba-lista[hidden]{ display:none !important; }
.pdet-arroba-lista button{ font:inherit; font-size:13px; font-weight:600; color:var(--accent); background:var(--accent-soft); border:0; border-radius:999px; padding:5px 10px; cursor:pointer; }
.det-gente{ display:flex; align-items:center; gap:12px; padding:10px 4px; border-bottom:1px solid var(--line); cursor:pointer; }
.det-gente input{ width:20px; height:20px; accent-color:var(--accent); }
.det-gente span:last-child{ display:flex; flex-direction:column; font-weight:600; }
.det-gente small{ color:var(--ink-soft); font-weight:400; }
.hoja-forma .btn-block{ margin-top:12px; }
.pdet-mostrar{ display:none; }
.pdet-mostrar[hidden]{ display:none !important; }

@media (max-width:899px){
  .pcab{ grid-template-columns:76px minmax(0,1fr) auto; gap:12px; }
  .pcab .portada{ width:76px; height:76px; }
  .etq-c{ font-size:11px; padding:2px 6px; border-radius:5px; }
  .pcab-etqs{ gap:4px; }
  .pgrid.grid .pfoto-pie .mas-btn{ position:absolute; top:8px; right:8px; width:30px; height:30px; margin:0; border-radius:50%; background:rgba(255,255,255,.95); color:var(--ink); box-shadow:0 1px 5px rgba(0,0,0,.22); }
  .pgrid.grid .pfoto-pie .mas-btn .ic{ width:18px; height:18px; }
  .solo-compu{ display:none !important; }
}
@media (min-width:900px){
  .tope-menu{ display:none; }
  .solo-movil-i{ display:none !important; }
  .corto{ display:none; }
  #pTrabajo{ max-width:1560px; }
  .ptrabajo{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; }
  body.det-oculto .ptrabajo{ grid-template-columns:minmax(0,1fr); }
  body.det-oculto #pTrabajo{ max-width:1560px; }   /* su diseño 13-oct: sin la barra de detalles, las fotos usan todo el ancho */
  .pdet-lado{ display:block; position:sticky; top:0; max-height:calc(100vh - 100px); overflow:auto; padding-bottom:12px; }
  body.det-oculto .pdet-lado{ display:none; }
  /* Show Sidebar (su pedido, 15-oct: el bloque oscuro no combinaba): el mismo botón blanco con borde que Edit Project */
  body.det-oculto .pdet-mostrar{ display:inline-flex; }
  .pdet-mostrar .ic{ width:19px; height:19px; color:var(--ink-soft); }
  .pcab-acc .mas-cab{ width:44px; height:44px; }   /* los tres botones de la fila con la misma altura */
  .pchips{ display:flex; order:0; flex:1 1 0; min-width:140px; }
  .pherr{ flex-wrap:nowrap; }
  .pchips .chip{ padding:6px 12px; font-size:13.5px; }
  .pherr .sel select{ height:36px; }
  .psel-nivel, .pherr-salto{ display:none; }
  .pherr .psel-cuarto{ order:1; flex:0 0 140px; }
  .subir-btn{ margin-left:0; }
  .pgrid.grid{ grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); }
}
/* Add Room: los cuartos que ya tiene el nivel, y "Done" para volver (se agregan varios sin salir). */
.c-hechos{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; }
.c-hechos small{ color:var(--ink-soft); font-size:12.5px; margin-right:2px; }
.c-hecho{ display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:600; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:3px 10px 3px 7px; }
.c-hecho .ic{ width:14px; height:14px; stroke-width:2.6; }
.c-listo{ margin-top:10px; }
.c-aviso{ margin:0 0 10px; }
.c-aviso.ok{ color:var(--accent); font-weight:600; }
.menu-pop .menu-sub{ display:block; font-size:12px; font-weight:500; color:var(--ink-soft); margin-top:1px; }
/* "Taking photos for…" de la cámara: se toca para cambiar de proyecto (los más cercanos primero). */
.hoja.sobre-cam{ z-index:91; }
.cam-titulo{ font:inherit; color:#fff; background:none; border:0; padding:4px 6px; border-radius:10px; text-align:left; cursor:pointer; }
.cam-titulo:active{ background:rgba(255,255,255,.12); }
.cam-titulo b{ display:flex; align-items:center; gap:4px; min-width:0; }
.cam-titulo b span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cam-titulo b .ic{ width:16px; height:16px; flex:0 0 auto; }
.cap-dist{ display:inline-flex; align-items:center; gap:4px; margin-top:3px; font-size:12px; font-weight:600; color:var(--ink-soft); }
.cap-dist .ic{ width:13px; height:13px; }
.cap-dist.cerca{ color:var(--accent); }
.cap-nota{ display:flex; align-items:center; gap:6px; margin:0 8px 6px; font-size:13px; color:var(--ink-soft); }
.cap-nota .ic{ width:15px; height:15px; color:var(--accent); }
.cap-fila.on{ background:var(--accent-soft); }
.cap-fila.on .cap-accion{ background:var(--card); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.cuarto-ayuda{ margin:8px 8px 6px; font-size:13.5px; color:var(--ink-soft); }
.cuarto-nuevo{ padding:2px 8px 8px; }
.cuarto-agregar{ margin:2px 8px 6px; }
button.cap-fila{ width:100%; font:inherit; color:inherit; background:none; border:0; text-align:left; -webkit-appearance:none; appearance:none; }
button.cap-fila.on{ background:var(--accent-soft); }
/* Cámara: el nombre del proyecto se recorta con "…" si es largo; el nivel/cuarto se queda arriba a la derecha. */
.cam-titulo{ flex:1 1 0; min-width:0; }
.cam-titulo small{ white-space:nowrap; }
/* Hoja de nivel/cuarto: cada "Add room" en su renglón bajo su nivel, y "Add level" siempre abajo, aparte. */
.cuarto-agregar{ display:flex; width:calc(100% - 16px); }
.cuarto-nivel-nuevo{ border-top:1px solid var(--line); padding-top:12px; margin-top:8px; }

/* ---------- LO APRENDIDO EN FIELD REPORTS (12 oct 2026) ----------
   1) Doble toque NO agranda la página (maximum-scale=1 en el viewport + manipulation).
   2) Un riel que se arrastra de lado: overflow-y:hidden (si no, el navegador lo vuelve "auto" y se arrastra para todos
      lados) y touch-action:pan-x pan-y, NUNCA pan-x a secas (si no, la página se ve congelada al subir con el dedo ahí). */
html, body{ touch-action:manipulation; }
.ptabs, .chips{ overflow-y:hidden; touch-action:pan-x pan-y; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.chips.envolver{ overflow:visible; }
/* Zoom de la cámara (como el del iPhone): .5 · 1× · 2× · 3×, y pellizcar. */
.camara{ touch-action:none; }
.cam-zoom{ grid-column:1 / -1; justify-self:center; display:flex; gap:6px; padding:4px; margin-bottom:14px; border-radius:999px; background:rgba(0,0,0,.35); }
.cam-zoom[hidden]{ display:none !important; }
.cam-z{ min-width:36px; height:36px; padding:0 6px; border-radius:999px; border:0; background:rgba(255,255,255,.12); color:#fff; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.cam-z.on{ background:rgba(0,0,0,.55); color:#ffd60a; font-size:13.5px; }
.camara video{ transform-origin:center center; transition:transform .08s linear; }

/* ---------- LA VENTANA DE UNA FOTO (diseño de Amilcar, 12 oct 2026) ---------- */
.pfoto-pant{ max-width:none !important; }
.fv-cab{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px; }
.fv-atras{ width:40px; height:40px; border:0; border-radius:10px; background:transparent; color:var(--ink); display:grid; place-items:center; cursor:pointer; flex:0 0 auto; }
.fv-atras:hover{ background:var(--card); }
.fv-atras .ic{ width:24px; height:24px; }
.fv-tit{ min-width:0; flex:1 1 160px; }
.fv-tit h1{ margin:0; font-size:22px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fv-ruta{ display:flex; align-items:center; gap:4px; color:var(--ink-soft); font-size:14.5px; margin-top:2px; }
.fv-ruta .ic{ width:14px; height:14px; }
.fv-acc{ display:flex; gap:8px; align-items:center; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; touch-action:pan-x pan-y; scrollbar-width:none; max-width:100%; }
.fv-acc::-webkit-scrollbar{ display:none; }
.fv-acc .btn{ min-height:40px; padding:0 14px; font-size:14px; flex:0 0 auto; }
.fv-acc .fv-mas{ width:44px; padding:0; }
.fv-acc .fv-editar{ border-color:var(--accent); color:var(--accent); }
.fv-aviso{ margin:-4px 0 8px; }
.fv-aviso:empty{ display:none; }
.fv-cuerpo{ display:flex; flex-direction:column; gap:14px; }
.fv-main{ min-width:0; }
.fv-foto{ position:relative; background:#0b111c; border-radius:14px; overflow:hidden; aspect-ratio:4 / 3; display:grid; place-items:center; }
/* La foto ocupa el cuadro y cabe COMPLETA (14-oct, su reporte): antes una foto vertical se estiraba a todo lo ancho, el
   cuadro la cortaba y solo se veía el centro. Fija al cuadro, con margen a los lados. */
.fv-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
.fv-n{ position:absolute; top:10px; left:12px; font-size:12px; font-weight:600; color:#fff; background:rgba(0,0,0,.45); border-radius:999px; padding:3px 9px; }
.fv-flecha, .fv-grande{ position:absolute; width:44px; height:44px; border-radius:50%; border:0; background:rgba(15,20,30,.62); color:#fff; display:grid; place-items:center; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.25); }
.fv-flecha .ic, .fv-grande .ic{ width:22px; height:22px; stroke-width:2.2; }
.fv-ant{ left:12px; top:50%; transform:translateY(-50%); }
.fv-sig{ right:12px; top:50%; transform:translateY(-50%); }
.fv-grande{ right:12px; bottom:12px; }
.fv-tira{ display:flex; gap:10px; margin-top:12px; overflow-x:auto; overflow-y:hidden; touch-action:pan-x pan-y; scrollbar-width:none; padding:2px; }
.fv-tira::-webkit-scrollbar{ display:none; }
.fv-mini{ flex:0 0 auto; width:96px; height:72px; border-radius:10px; overflow:hidden; border:0; padding:0; background:var(--bg2); cursor:pointer; outline:2px solid transparent; outline-offset:1px; }
.fv-mini img{ width:100%; height:100%; object-fit:cover; display:block; }
.fv-mini.on{ outline:3px solid var(--accent); }
.fv-asa{ display:none; }
.fv-panel{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; min-width:0; }
.fv-h{ margin:0 0 12px; font-size:19px; font-weight:800; }
.fv-grupo{ display:block; width:100%; border:0; border-bottom:1px solid var(--line); background:none; font:inherit; color:inherit; text-align:left; padding:6px 0 10px; margin:0 0 6px; }
button.fv-grupo{ cursor:pointer; }
.fv-doble{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fv-fila{ display:flex; align-items:flex-start; gap:10px; padding:5px 0; font-size:14px; line-height:1.4; }
.fv-fila > .ic{ width:20px; height:20px; color:var(--ink); margin-top:1px; flex:0 0 auto; }
.fv-fila-t{ min-width:0; flex:1; }
.fv-fila-t small{ display:block; color:var(--ink-soft); font-size:12px; }
.fv-fila-t .ic{ width:13px; height:13px; vertical-align:-2px; color:var(--ink-soft); }
.fv-lugar .fv-fila > .ic:last-child{ width:16px; height:16px; color:var(--ink-mute); }
.fv-gris{ color:var(--ink-mute); font-size:13.5px; margin:2px 0; }
.fv-sec{ border:1px solid var(--line); border-radius:12px; padding:12px; margin-top:12px; }
.fv-sec-t{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.fv-sec-t > .ic{ width:20px; height:20px; }
.fv-sec-t h3{ margin:0; font-size:16px; font-weight:700; flex:1; }
.fv-agregar{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:14px; font-weight:600; color:var(--accent); background:var(--accent-soft); border:0; border-radius:8px; padding:7px 11px; cursor:pointer; }
.fv-agregar .ic{ width:16px; height:16px; }
.fv-tags{ display:flex; flex-wrap:wrap; gap:7px; }
.etq-s{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:7px; font:inherit; font-size:13px; font-weight:600; border:0; }
.etq-s button{ font:inherit; font-size:10px; border:0; background:none; color:inherit; cursor:pointer; padding:0 0 0 2px; opacity:.8; }
.etq-s.c-azul{ background:#e3edff; color:#1d4ed8; } .etq-s.c-verde{ background:#dff3e5; color:#15803d; } .etq-s.c-gris{ background:#eef1f5; color:#3f4a5a; }
.etq-s.c-amarillo{ background:#fff4cc; color:#8a6500; } .etq-s.c-naranja{ background:#ffe7d6; color:#c2410c; } .etq-s.c-rojo{ background:#fde2e2; color:#b91c1c; } .etq-s.c-morado{ background:#ede4ff; color:#6d28d9; }
.fv-etq-op{ cursor:pointer; }
.fv-caja{ border-top:1px dashed var(--line2); margin-top:10px; padding-top:10px; display:flex; flex-direction:column; gap:8px; }
.fv-caja .etq-nueva, .fv-caja .etq-colores{ margin:0; }
.fv-tarea{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:8px; }
.fv-circ{ width:24px; height:24px; border-radius:50%; border:2px solid var(--line2); background:var(--card); display:grid; place-items:center; cursor:pointer; flex:0 0 auto; padding:0; color:#fff; }
.fv-circ .ic{ width:14px; height:14px; stroke-width:3; }
.fv-tarea.hecha .fv-circ{ background:var(--accent); border-color:var(--accent); }
.fv-tarea.hecha b{ color:var(--ink-mute); text-decoration:line-through; }
.fv-tarea-t{ flex:1; min-width:0; display:flex; flex-direction:column; }
.fv-tarea-t b{ font-size:14px; font-weight:600; }
.fv-tarea-t small{ color:var(--ink-soft); font-size:12.5px; }
.fv-av{ width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff; display:inline-grid; place-items:center; font-size:12px; font-weight:700; flex:0 0 auto; }
.fv-puntos{ width:30px; height:30px; border:0; background:none; color:var(--ink-soft); cursor:pointer; border-radius:8px; display:grid; place-items:center; flex:0 0 auto; }
.fv-puntos .ic{ transform:rotate(90deg); }
.fv-in{ width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--card); border:1px solid var(--line2); border-radius:10px; padding:0 10px; height:40px; }
.fv-in-fila{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fv-in-fila label{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.fv-com{ display:flex; gap:10px; border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:8px; }
.fv-com-t{ flex:1; min-width:0; }
.fv-com-t b{ font-size:14px; }
.fv-com-t small{ display:block; color:var(--ink-soft); font-size:12px; }
.fv-com-t p{ margin:6px 0 0; font-size:14px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.fv-escribir{ position:relative; display:flex; margin-top:6px; }
.fv-escribir input{ flex:1; min-width:0; font:inherit; font-size:16px; height:44px; border:1px solid var(--line2); border-radius:12px; padding:0 50px 0 12px; background:var(--bg2); color:var(--ink); }
.fv-enviar{ position:absolute; right:5px; top:5px; width:34px; height:34px; border-radius:50%; border:0; background:var(--accent); color:#fff; display:grid; place-items:center; cursor:pointer; }
.fv-enviar .ic{ width:18px; height:18px; stroke-width:2.4; }
@media (max-width:899px){
  .fv-acc{ order:3; flex:1 1 100%; }
  .fv-tit h1{ font-size:20px; }
  .fv-flecha{ width:38px; height:38px; }
  .fv-mini{ width:78px; height:58px; }
}
@media (min-width:900px){
  .fv-cuerpo{ display:grid; grid-template-columns:minmax(0,1fr) 22px 360px; gap:12px; align-items:start; }
  body.fv-oculto .fv-cuerpo{ grid-template-columns:minmax(0,1fr) 22px; }
  body.fv-oculto .fv-panel{ display:none; }
  .fv-asa{ display:grid; place-items:center; align-self:center; width:22px; height:64px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink-soft); cursor:pointer; padding:0; box-shadow:0 2px 8px rgba(16,40,80,.08); }
  .fv-asa:hover{ color:var(--accent); border-color:var(--accent); }
  .fv-asa .ic{ width:16px; height:16px; }
  body.fv-oculto .fv-asa .ic{ transform:rotate(180deg); }
  .fv-panel{ position:sticky; top:0; max-height:calc(100vh - 120px); overflow:auto; }
  .fv-foto{ aspect-ratio:auto; height:min(62vh, 640px); }
}

/* ---------- EDITOR DE FOTOS (12 oct 2026): las herramientas en el lugar de "Photo Details" ---------- */
.ed-lienzo{ position:absolute; touch-action:none; cursor:crosshair; }
body.fv-editando .fv-flecha, body.fv-editando .fv-tira, body.fv-editando .fv-grande{ opacity:.25; pointer-events:none; }
body.fv-editando .fv-asa{ visibility:hidden; }
.fv-acc .fv-editar.on{ background:var(--accent); color:#fff; }
.ed-cab{ display:flex; align-items:center; justify-content:space-between; }
.ed-cab .fv-h{ margin:0; }
.ed-hist{ display:flex; gap:6px; }
.ed-ic{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line2); background:var(--card); color:var(--ink); display:grid; place-items:center; cursor:pointer; }
.ed-ic[disabled]{ opacity:.35; cursor:default; }
.ed-ic .ic{ width:18px; height:18px; }
.ed-sec{ border-top:1px solid var(--line); padding:12px 0; }
.ed-sec h3{ display:flex; align-items:center; justify-content:space-between; margin:0 0 10px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); font-weight:700; }
.ed-herr{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; }
.ed-h{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 2px 7px; border-radius:12px; border:0; background:var(--bg2); color:var(--ink); font:inherit; font-size:11px; font-weight:600; cursor:pointer; }
.ed-h .ic{ width:22px; height:22px; }
.ed-h.on{ background:var(--accent); color:#fff; }
.ed-ayuda{ margin:10px 0 0; font-size:13px; color:var(--ink-soft); line-height:1.4; }
.ed-colores{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.ed-color{ width:28px; height:28px; border-radius:50%; border:0; cursor:pointer; box-shadow:0 0 0 1px rgba(0,0,0,.15); }
.ed-color.on{ box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--accent); }
.ed-fila{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; padding:4px 0; }
.ed-fila input[type=range]{ flex:0 1 170px; accent-color:var(--accent); }
.ed-reset{ font:inherit; font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--accent); background:none; border:0; cursor:pointer; }
.ed-mat{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.ed-chip{ font:inherit; font-size:13px; font-weight:600; padding:7px 12px; border-radius:999px; border:1px solid var(--line2); background:var(--card); color:var(--ink); cursor:pointer; }
.ed-chip.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.ed-lect{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ed-lect input{ width:86px; height:42px; font:inherit; font-size:22px; font-weight:700; text-align:center; border:1px solid var(--line2); border-radius:10px; background:var(--card); color:var(--ink); }
.ed-lect > span{ font-size:18px; color:var(--ink-soft); margin-right:6px; }
.ed-est{ font:inherit; font-size:12px; font-weight:800; padding:6px 10px; border-radius:999px; border:0; cursor:pointer; opacity:.45; }
.ed-est.on{ opacity:1; }
.ed-est.wet{ background:#ffe5e5; color:#d70015; } .ed-est.drying{ background:#fff4d6; color:#a05a00; } .ed-est.dry{ background:#e3f6e8; color:#1f8a3b; }
.ed-pie .pdet-fila{ justify-content:flex-start; }

/* ---------- EDIT PHOTO, diseño de Amilcar (12 oct 2026): 4 herramientas grandes, ayuda, secciones que se abren ---------- */
.ed-base{ position:absolute; pointer-events:none; }
.ed-x{ width:34px; height:34px; border-radius:50%; border:0; background:var(--bg2); color:var(--ink); font-size:15px; cursor:pointer; display:grid; place-items:center; }
.ed-tiles{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin:14px 0 12px; }
.ed-t{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 4px 11px; border-radius:14px; border:1px solid var(--line2); background:var(--card); color:var(--ink); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.ed-t .ic{ width:24px; height:24px; }
.ed-t.on{ border-color:var(--accent); background:rgba(10,102,255,.08); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.ed-tiles.chico{ margin:4px 0 10px; }
.ed-tiles.chico .ed-t{ padding:10px 2px 8px; font-size:11.5px; }
.ed-tiles.chico .ed-t .ic{ width:20px; height:20px; }
.ed-info{ display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:12px; background:var(--bg2); }
.ed-info > .ic{ flex:0 0 auto; width:20px; height:20px; color:var(--accent); margin-top:1px; }
.ed-info > div{ min-width:0; flex:1; }
.ed-info p{ margin:0; font-size:13.5px; line-height:1.45; color:var(--ink-soft); }
.ed-info .ed-sub, .ed-info .ed-colores, .ed-info .ed-mat, .ed-info .ed-lect{ margin-top:10px; margin-bottom:0; }
.ed-sub{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.ed-chip .ic{ width:15px; height:15px; vertical-align:-3px; margin-right:4px; }
.ed-chip[disabled]{ opacity:.4; cursor:default; }
.ed-chip.rojo{ color:#d70015; border-color:#f3b8bd; }
.ed-accs{ margin-top:12px; border-top:1px solid var(--line); }
.ed-acc{ border-bottom:1px solid var(--line); }
.ed-acc-t{ width:100%; display:flex; align-items:center; gap:10px; padding:14px 2px; border:0; background:none; color:var(--ink); font:inherit; font-size:15px; font-weight:600; cursor:pointer; text-align:left; }
.ed-acc-t > span{ flex:1; }
.ed-acc-t .ic{ width:20px; height:20px; color:var(--ink-soft); }
.ed-acc-t .ic:last-child{ width:18px; height:18px; transform:rotate(-90deg); transition:transform .15s; }
.ed-acc.abierto .ed-acc-t .ic:last-child{ transform:none; }
.ed-acc-c{ padding:0 2px 14px; }
.ed-filtros{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.ed-filtro{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:0 0 4px; border:0; background:none; color:var(--ink-soft); font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.ed-fmini{ display:block; width:100%; aspect-ratio:4/3; border-radius:10px; background:var(--bg2) center/cover no-repeat; box-shadow:inset 0 0 0 1px var(--line2); }
.ed-filtro.on{ color:var(--accent); }
.ed-filtro.on .ed-fmini{ box-shadow:0 0 0 2px var(--accent); }
.ed-pie{ display:flex; gap:10px; margin-top:14px; }
.ed-pie .btn{ flex:1; }
@media (prefers-reduced-motion:reduce){ .ed-acc-t .ic:last-child{ transition:none; } }
.ed-info .ed-colores{ gap:8px; flex-wrap:nowrap; }
.ed-info .ed-color{ width:26px; height:26px; flex:0 0 26px; }
/* Editor (15 oct 2026): dibujitos de las figuras, el pincel y el fondo del texto dentro de los botones */
.ed-fig{ width:16px; height:16px; vertical-align:-3.5px; margin-right:5px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ed-chip.solo, .ed-fila-x .ed-chip.solo{ display:inline-flex; align-items:center; justify-content:center; padding:6px 9px; }
.ed-chip.solo .ed-fig{ margin-right:0; width:18px; height:18px; }
.ed-info .ed-grosor{ margin-top:10px; gap:10px; }
.ed-info .ed-grosor > span{ white-space:nowrap; font-size:13.5px; }
.ed-info .ed-grosor input[type=range]{ flex:1 1 auto; min-width:0; }
/* Editando: el velo de las hojas (Adjustments, Filters) solo atrapa el toque, no oscurece la foto que se está ajustando */
body.fv-editando .fv-velo{ background:transparent; }
/* Con una herramienta escogida, las flechas de otra foto no tapan la orilla de la foto (se dibuja hasta el borde) */
body.fv-editando.ed-activo .fv-flecha{ opacity:.18; pointer-events:none; }
/* Mientras guarda la foto editada no se cambia nada (la X de cerrar sí responde y avisa que espere) */
body.ed-guardando #fvPanel > :not(.ed-cab):not(.aviso), body.ed-guardando #edTel > :not(.aviso), body.ed-guardando #edHoja{ pointer-events:none; }
body.ed-guardando #fvPanel .ed-accs, body.ed-guardando #fvPanel .ed-tiles, body.ed-guardando #fvPanel .ed-info, body.ed-guardando #edTel .ed-tel-bandeja, body.ed-guardando #edTel .ed-tel-opc{ opacity:.55; }

/* ---------- VENTANA DE LA FOTO: más espacio para la foto (su pedido, 12 oct 2026) ---------- */
@media (min-width:900px){
  main:has(> #pFoto:not([hidden])){ padding-left:20px; padding-right:14px; padding-bottom:16px; }
  .fv-cuerpo{ grid-template-columns:minmax(0,1fr) 22px 320px; gap:10px; }
  body.fv-oculto .fv-cuerpo{ grid-template-columns:minmax(0,1fr) 22px; }
  body.fv-editando .fv-cuerpo{ grid-template-columns:minmax(0,1fr) 320px; }
  body.fv-editando .fv-asa{ display:none; }
  .fv-foto{ aspect-ratio:auto; height:max(360px, calc(100vh - 250px)); max-height:none; }   /* el visor baja hasta el pie de la pantalla */
  .fv-panel{ padding:14px; }
}
.fv-sec-t .fv-agregar{ white-space:nowrap; flex:0 0 auto; }

/* ---------- LA FOTO EN EL TELÉFONO (su diseño, 12 oct 2026): pantalla completa, ••• arriba, barra Share/Download/Edit/Delete,
   Photo Details como hoja que sube, y al editar: Cancel / Edit Photo / Save con la bandeja de herramientas abajo ---------- */
.fv-tel, .fv-tel-ed, .fv-tel-ed-t, .fv-tel-txt, .fv-barra, .ed-tel, .ed-hoja, .fv-velo, .fv-cerrar-tel{ display:none; }
.ed-tel[hidden], .ed-hoja[hidden], .fv-velo[hidden], .fv-fav[hidden]{ display:none !important; }
.fv-h-fila{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fv-fav{ position:absolute; top:8px; right:12px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.45); color:#ff375f; display:grid; place-items:center; }
.fv-fav .ic{ width:17px; height:17px; fill:currentColor; }
.pfoto.fv-ultima .ffoto{ outline:3px solid var(--accent); outline-offset:2px; }
.ed-escribe{ position:absolute; z-index:6; transform:translate(-50%, -50%); width:170px; max-width:80%; height:34px; border:2px solid #fff; border-radius:999px; padding:0 14px; font:700 16px -apple-system, system-ui, sans-serif; text-align:center; box-shadow:0 4px 14px rgba(0,0,0,.35); outline:none; }
.ed-escribe::placeholder{ color:inherit; opacity:.7; }
/* El aviso de cambios sin guardar (computadora y teléfono) */
.fv-dialogo{ align-items:center; z-index:80; padding:20px; }
.fv-dialogo-caja{ width:100%; max-width:330px; background:var(--card); border-radius:18px; padding:20px 16px 14px; text-align:center; box-shadow:0 18px 50px rgba(10,17,35,.35); display:flex; flex-direction:column; gap:10px; }
.fv-dialogo-caja h2{ margin:0; font-size:18px; font-weight:700; }
.fv-dialogo-caja p{ margin:0 0 6px; font-size:14px; color:var(--ink-soft); line-height:1.4; }
.fv-dialogo-caja .btn{ width:100%; }
.fv-dlg-rojo{ background:var(--bg2); color:#d70015; }
.fv-dlg-no{ background:var(--bg2); color:var(--accent); }

@media (max-width:899px){
  body:has(#pFoto:not([hidden])) .tope, body:has(#pFoto:not([hidden])) .pie{ display:none !important; }
  main:has(> #pFoto:not([hidden])){ padding:0; overflow:hidden; }
  #pFoto:not([hidden]){ position:relative; display:flex; flex-direction:column; height:100%; padding-top:env(safe-area-inset-top); background:var(--bg2); }
  .fv-cab{ position:relative; flex-wrap:nowrap; min-height:52px; margin:0; padding:4px 10px; gap:6px; }
  .fv-acc, .fv-ruta{ display:none; }
  .fv-atras{ width:auto; height:40px; padding:0 6px 0 0; gap:0; display:flex; align-items:center; color:var(--accent); border-radius:8px; }
  .fv-atras .ic{ width:26px; height:26px; }
  .fv-tel-txt{ display:inline; font-size:17px; }
  .fv-tit{ position:absolute; left:84px; right:84px; top:50%; transform:translateY(-50%); text-align:center; pointer-events:none; flex:none; }
  .fv-tit h1{ font-size:17px; font-weight:700; letter-spacing:0; }
  .fv-tel.fv-mas-tel{ display:grid; place-items:center; margin-left:auto; width:34px; height:34px; border-radius:50%; border:1.6px solid var(--ink); background:transparent; color:var(--ink); padding:0; cursor:pointer; }
  .fv-mas-tel .ic{ width:18px; height:18px; }
  .fv-aviso{ margin:0 12px 6px; }
  .fv-cuerpo{ flex:1; min-height:0; display:flex; flex-direction:column; gap:0; }
  .fv-main{ flex:1; min-height:0; display:flex; flex-direction:column; }
  .fv-foto{ flex:1 1 auto; min-height:0; aspect-ratio:auto; border-radius:0; }
  .fv-tira{ margin:0; padding:8px 10px; gap:6px; flex:0 0 auto; background:var(--card); }
  .fv-mini{ width:62px; height:48px; border-radius:8px; }
  .fv-barra{ display:flex; flex:0 0 auto; justify-content:space-around; background:var(--card); border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .fv-barra button{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; border:0; background:none; color:var(--ink); font:inherit; font-size:11px; font-weight:500; padding:6px 0; cursor:pointer; border-radius:10px; }
  .fv-barra button .ic{ width:24px; height:24px; }
  .fv-barra button[data-fv-tel="editar"]{ color:var(--accent); }
  /* Photo Details: hoja que sube; la foto se ve detrás */
  .fv-panel{ display:none; }
  body.fv-detalles:not(.fv-editando) .fv-panel{ display:block; position:absolute; left:0; right:0; bottom:0; z-index:30; max-height:76%; overflow:auto; border-radius:18px 18px 0 0; border:0; box-shadow:0 -12px 40px rgba(10,17,35,.28); padding:8px 16px calc(16px + env(safe-area-inset-bottom)); }
  body.fv-detalles:not(.fv-editando) .fv-panel::before{ content:''; display:block; width:38px; height:5px; border-radius:3px; background:var(--line2); margin:0 auto 10px; }
  .fv-cerrar-tel{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; border:0; background:var(--bg2); color:var(--ink); font-size:14px; cursor:pointer; flex:0 0 auto; }
  .fv-h-fila .fv-h{ margin:0; }
  .fv-h-fila{ margin-bottom:10px; }
  .fv-velo{ display:block; position:absolute; inset:0; z-index:29; background:rgba(12,20,36,.25); }
  /* Editando: Cancel / Edit Photo / Save; la bandeja de herramientas abajo; las flechas siguen (cambiar de foto sin salir) */
  body.fv-editando .fv-atras, body.fv-editando .fv-mas-tel, body.fv-editando .fv-tit h1, body.fv-editando .fv-tira, body.fv-editando .fv-barra, body.fv-editando .fv-grande, body.fv-editando .fv-n, body.fv-editando .fv-fav{ display:none !important; }
  body.fv-editando .fv-tel-ed{ display:block; border:0; background:none; font:inherit; font-size:17px; color:var(--accent); padding:8px 4px; cursor:pointer; }
  body.fv-editando .fv-tel-guardar{ margin-left:auto; font-weight:700; }
  body.fv-editando .fv-tel-guardar[disabled]{ opacity:.4; }
  body.fv-editando .fv-tel-ed-t{ display:block; font-size:17px; font-weight:700; }
  body.fv-editando .fv-flecha{ opacity:1; pointer-events:auto; width:38px; height:38px; }
  .ed-tel{ display:block; flex:0 0 auto; background:var(--card); border-top:1px solid var(--line); padding:8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .ed-tel .aviso{ margin:4px 2px 0; } .ed-tel .aviso:empty{ display:none; }
  .ed-tel-opc{ display:flex; align-items:center; gap:8px; min-height:38px; }
  .ed-tel-opc > :first-child{ flex:1; min-width:0; }
  .ed-fila-x{ display:flex; align-items:center; gap:6px; overflow-x:auto; overflow-y:hidden; touch-action:pan-x pan-y; scrollbar-width:none; padding:2px 0; }
  .ed-fila-x::-webkit-scrollbar{ display:none; }
  .ed-fila-x > *{ flex:0 0 auto; }
  .ed-fila-x .ed-chip{ padding:6px 11px; font-size:13px; }
  .ed-fila-x .ed-colores{ display:flex; gap:7px; margin:0; flex-wrap:nowrap; }
  .ed-fila-x .ed-color{ width:24px; height:24px; flex:0 0 24px; }
  .ed-tel-ayuda{ margin:0; font-size:13px; color:var(--ink-soft); line-height:1.35; white-space:normal; }
  .ed-fila-x .ed-tel-ayuda{ white-space:nowrap; }
  .ed-tel-hist{ display:flex; gap:6px; flex:0 0 auto; }
  .ed-tel-hist .ed-ic{ width:34px; height:34px; }
  .ed-tel-bandeja{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; margin-top:8px; }
  .ed-tt{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 2px 6px; border-radius:12px; border:0; background:var(--bg2); color:var(--ink); font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; }
  .ed-tt .ic{ width:24px; height:24px; }
  .ed-tt.on{ background:rgba(10,102,255,.12); color:var(--accent); box-shadow:inset 0 0 0 1.5px var(--accent); }
  /* Las hojas del editor (Adjustments, Filters, Markup Tools) */
  .ed-hoja{ display:block; position:absolute; left:0; right:0; bottom:0; z-index:31; max-height:72%; overflow:auto; background:var(--card); border-radius:18px 18px 0 0; box-shadow:0 -12px 40px rgba(10,17,35,.28); padding:8px 16px calc(16px + env(safe-area-inset-bottom)); }
  .ed-hoja::before{ content:''; display:block; width:38px; height:5px; border-radius:3px; background:var(--line2); margin:0 auto 8px; }
  .ed-hoja-cab{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
  .ed-hoja-cab h2{ flex:1; margin:0; font-size:18px; font-weight:700; }
  .ed-hoja-atras{ width:32px; height:32px; border:0; background:none; color:var(--accent); display:grid; place-items:center; cursor:pointer; padding:0; }
  .ed-hoja-atras .ic{ width:22px; height:22px; }
  .ed-aj{ display:flex; align-items:center; gap:12px; padding:9px 0; font-size:15px; }
  .ed-aj > .ic{ width:22px; height:22px; flex:0 0 auto; }
  .ed-aj > span{ flex:0 0 96px; }
  .ed-aj input{ flex:1; min-width:0; accent-color:var(--accent); }
  .ed-hoja-fila{ width:100%; display:flex; align-items:center; gap:12px; padding:14px 0; border:0; border-top:1px solid var(--line); background:none; font:inherit; font-size:15px; color:var(--ink); cursor:pointer; text-align:left; }
  .ed-hoja-fila > span{ flex:1; }
  .ed-hoja-fila small{ color:var(--ink-soft); font-size:13px; }
  .ed-hoja-fila .ic{ width:22px; height:22px; }
  .ed-hoja-fila .ic:last-child:not(:first-child){ width:18px; height:18px; color:var(--ink-mute); }
  .ed-hoja-listo{ width:100%; margin-top:10px; }
  .ed-hoja .ed-mat, .ed-hoja .ed-lect{ margin:10px 0; }
}
@media (max-width:899px){ body.fv-editando .fv-flecha{ z-index:4; }
  /* Cancel y Save de arriba quedan encima del velo de Adjustments: responden al primer toque */
  body.fv-editando .fv-cab{ z-index:30; } }

/* ---------- HOME (su diseño, 12 oct 2026): 4 tarjetas con "Last update", New Project, tabla con miniatura y Last Update ---------- */
.tarj-ult{ display:flex; align-items:flex-start; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:13px; line-height:1.35; }
.tarj-ult > .ic{ width:18px; height:18px; flex:0 0 auto; color:var(--ink-mute); margin-top:1px; }
.tarj-ult small{ display:block; font-size:12.5px; color:var(--ink-mute); }
.tarj-ult span{ white-space:nowrap; }
.tc-nom{ display:flex; align-items:center; gap:12px; min-width:0; }
.tc-nom-t{ min-width:0; }
.tc-mini{ display:none; flex:0 0 auto; width:56px; height:40px; border-radius:6px; overflow:hidden; background:linear-gradient(135deg,#e9f0fa,#dfe8f5); }
.tc-mini img{ width:100%; height:100%; object-fit:cover; display:block; }
.tc-ult{ display:none; color:var(--ink-soft); font-size:14.5px; line-height:1.3; }
.tc-ult small{ display:block; color:var(--ink-mute); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inicio-nuevo{ display:none; }
@media (min-width:900px){
  .recientes{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; margin-bottom:22px; }
  .tarj-foto{ aspect-ratio:16 / 8; }
  .tarj-cuerpo{ padding:16px 16px 14px; }
  .tarj-dir{ margin-top:3px; }
  .tarj-dir + .tarj-dir{ margin-top:0; }
  .tarj-ult{ font-size:14.5px; margin-top:14px; padding-top:14px; }
  .tarj-ult small{ font-size:14px; }
  .tarj-ult > .ic{ width:20px; height:20px; }
  .inicio-nuevo{ display:inline-flex; margin:0 0 26px; min-height:46px; padding:0 22px; font-size:16px; }
  .tc-mini{ display:block; }
  .tc-ult{ display:block; min-width:0; }
  .tcab, .tfila{ grid-template-columns:minmax(0,1.5fr) minmax(0,1.6fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,.95fr) 46px; }
  .tfila{ min-height:60px; }
}
@media (min-width:900px) and (max-width:1180px){
  .recientes{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .tcab, .tfila{ grid-template-columns:minmax(0,1.5fr) minmax(0,1.3fr) minmax(0,.85fr) minmax(0,.9fr) minmax(0,.95fr) 40px; }
}
@media (max-width:899px){
  .tarj-ult{ border-top:0; padding-top:0; margin-top:7px; font-size:12.5px; }
  .tarj-ult > .ic{ width:15px; height:15px; }
  .tarj-ult small{ display:inline; font-size:12.5px; } .tarj-ult small::before{ content:' · '; }
}

/* ---------- WELCOME ARRIBA (su pedido, 12 oct 2026; solo computadora) ---------- */
.tope-fecha{ display:none; }
@media (min-width:900px){ .tope{ position:relative; z-index:3; } }
/* Welcome a la altura del logo, en la barra de arriba, cuando cabe junto al buscador (menú fijo desde 1220px; escondido,
   desde 1020px). La barra se alinea con el contenido. La fecha va junto al buscador si cabe; si no, debajo del subtítulo. */
.tope-bienv{ display:none; }
@media (min-width:1220px){
  body:has(#pInicio:not([hidden])) .tope{ align-items:flex-start; padding-left:max(44px, calc((100% - 1180px) / 2)); padding-right:max(44px, calc((100% - 1180px) / 2)); }
  body:has(#pInicio:not([hidden])) .tope-bienv{ display:block; margin-right:auto; min-width:0; }
  body:has(#pInicio:not([hidden])) #pInicio .bienv{ display:none; }
  body:has(#pInicio:not([hidden])) #pInicio{ padding-top:16px; }
  .tope-bienv .bienv-fecha{ display:block; padding-top:8px; font-size:14px; }
}
@media (min-width:1410px){
  body:has(#pInicio:not([hidden])) .tope-bienv .bienv-fecha{ display:none; }
  body:has(#pInicio:not([hidden])) .tope-fecha{ display:block; align-self:center; color:var(--ink-soft); font-size:15px; white-space:nowrap; margin-right:6px; }
}
@media (min-width:900px){
  .tope-bienv .bienv-t{ font-size:40px; }
  .tope-bienv .bienv-sub{ font-size:18px; margin-top:8px; }
  .tope:has(.tope-bienv) .tope-buscar, .tope:has(.tope-bienv) .tope-btn, .tope:has(.tope-bienv) .avatar-tope{ flex:0 0 auto; }
}

/* ---------- HOME EN EL TELÉFONO (su diseño, 12 oct 2026): lupa arriba, Welcome con fecha, Recent Projects deslizables
   con puntitos, All Projects con New Project, buscador y estado a la vista, filas con foto; el menú con quién arriba ---------- */
.tope-buscar-tel, .lat-cerrar, .tarj-hace, .rec-puntos, .inicio-nuevo-tel{ display:none; }
@media (max-width:899px){
  .tope-menu{ color:var(--accent); }
  .tope-buscar-tel{ display:grid; }
  .tope-logo{ font-size:25px; }
  /* Welcome */
  #pInicio .bienv{ flex-direction:column; gap:0; margin:2px 0 18px; }
  #pInicio .bienv-sub{ margin-top:6px; color:#4a6390; font-size:15.5px; }
  #pInicio .bienv-fecha{ display:block; padding-top:4px; font-size:15px; color:var(--ink-soft); }
  /* Recent Projects: tarjetas que se deslizan */
  .recientes{ flex-direction:row; gap:10px; overflow-x:auto; overflow-y:hidden; touch-action:pan-x pan-y; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 -18px 8px; padding:2px 18px 6px; }
  .recientes::-webkit-scrollbar{ display:none; }
  .recientes .tarj{ display:block; flex:0 0 46%; scroll-snap-align:start; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--sombra); }
  .recientes .tarj-foto{ height:96px; border-radius:0; }
  .tarj-hace{ display:block; position:absolute; top:8px; right:8px; background:rgba(20,26,38,.72); color:#fff; font-size:12.5px; font-weight:600; padding:3px 9px; border-radius:999px; }
  .recientes .tarj-cuerpo{ padding:10px 10px 10px; }
  .recientes .tarj-nom{ font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .recientes .tarj-dir{ font-size:13px; margin-top:2px; }
  .recientes .tarj-dir + .tarj-dir{ margin-top:0; }
  .recientes .tarj .pill{ margin-top:6px; font-size:12px; }
  .recientes .tarj-ult{ border-top:0; padding-top:0; margin-top:8px; font-size:12.5px; }
  .recientes .tarj-ult small{ display:block; font-size:12.5px; } .recientes .tarj-ult small::before{ content:none; }
  .tu-pre{ display:none; }
  .rec-puntos{ display:flex; justify-content:center; gap:8px; margin:4px 0 18px; }
  .rec-puntos:empty{ display:none; }
  .rec-puntos i{ width:8px; height:8px; border-radius:50%; background:#c9d3e3; }
  .rec-puntos i.on{ background:var(--accent); }
  /* All Projects: título + New Project; buscador; estado + ordenar */
  .sec-inicio{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }
  .sec-inicio .sec-t{ font-size:21px; }
  .inicio-nuevo-tel{ display:inline-flex; min-height:42px; padding:0 16px; font-size:15px; }
  .sec-inicio .sec-herr{ display:contents; }
  .sec-inicio .buscar{ grid-column:1 / -1; order:3; }
  .sec-inicio .sel{ order:4; }
  .sec-inicio .icono-btn{ order:5; }
  /* Filas: foto, nombre, dirección, etapa; a la derecha hace cuánto y el PM; ••• */
  .tabla .tfila{ grid-template-columns:72px minmax(0,1fr) auto 30px; grid-template-areas:"mini nom ult acc" "mini dir ult acc" "mini est ult acc"; column-gap:10px; row-gap:2px; padding:10px; align-items:center; }
  .tabla .tc-nom{ display:contents; }
  .tabla .tc-mini{ display:block; grid-area:mini; width:72px; height:56px; border-radius:8px; align-self:center; }
  .tabla .tc-nom-t{ grid-area:nom; } .tabla .tf-movil{ display:none; }
  .tabla .tc-dir{ display:block; grid-area:dir; font-size:13px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tabla .tc-est{ grid-area:est; } .tabla .tc-est .pill{ font-size:12px; padding:2px 9px; }
  .tabla .tc-ult{ display:block; grid-area:ult; font-size:13px; padding-left:10px; border-left:1px solid var(--line); align-self:center; }
  .tabla .tc-ult small{ font-size:12.5px; }
  .tabla .tc-acc{ grid-area:acc; } .tabla .tc-acc .mas-btn{ display:grid; width:30px; } .tabla .chev-movil{ display:none; }
  .tabla .mas-btn .ic{ transform:rotate(90deg); }
  /* El menú: Scanova360 con la X, quién arriba, Home en azul claro, Sign Out abajo */
  .lat-cab{ display:flex; align-items:center; justify-content:space-between; padding:0 4px 18px 12px; }
  .lateral .lat-cab .lat-logo{ padding:0; }
  .lat-cerrar{ display:grid; place-items:center; width:38px; height:38px; border:0; background:none; color:var(--ink-soft); cursor:pointer; border-radius:10px; }
  .lat-cerrar svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
  .lateral .lateral-quien{ order:-1; padding:4px 10px 18px; }
  .lateral .lat-cab{ order:-2; }
  .lateral .lateral-quien .avatar{ width:52px; height:52px; font-size:19px; }
  .lateral .quien-nom{ font-size:17px; font-weight:700; } .lateral .quien-rol{ color:var(--ink-soft); font-size:14px; }
  .lateral .navitem{ padding:13px 14px; font-size:17px; }
  .lateral .navitem.on{ background:var(--accent-soft); color:var(--accent); }
  .lateral .salir-link{ border-top:1px solid var(--line); padding-top:16px; margin-top:6px; }
}
@media (max-width:899px){
  .recientes{ scroll-padding-left:18px; }
  .recientes .tarj{ flex-basis:39%; }
  .recientes .tarj-foto{ height:88px; }
  .sec-inicio .icono-btn{ justify-self:end; }
}
@media (max-width:899px){
  .sec-inicio .buscar{ grid-row:2; }
  .sec-inicio .sel{ grid-column:1 / -1; grid-row:3; margin-right:56px; }
  .sec-inicio .icono-btn{ grid-column:2; grid-row:3; width:46px; height:44px; }
}
@media (max-width:899px){ .tabla .tfila{ grid-template-columns:72px minmax(0,1fr) 96px 30px; } .tabla .tc-ult small{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } }
@media (max-width:899px){ .tabla .tfila{ grid-template-columns:64px minmax(0,1fr) 84px 26px; column-gap:9px; } .tabla .tc-mini{ width:64px; height:52px; } .tabla .tc-ult{ padding-left:8px; } }
@media (max-width:899px){ .lateral .salir-link{ color:var(--ink); font-size:16.5px; } }
/* Su pedido: en el teléfono caben los 4 más recientes (dos y dos), sin deslizar */
@media (max-width:899px){
  .recientes{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; overflow:visible; margin:0 0 20px; padding:0; scroll-snap-type:none; }
  .recientes .tarj{ flex:none; }
  .recientes .tarj-foto{ height:92px; }
  .rec-puntos{ display:none !important; }
}
/* Su pedido: el menú del teléfono más angosto, que tape menos la pantalla */
@media (max-width:899px){
  body.menu-abierto .lateral{ width:206px; padding-left:8px; padding-right:8px; }
  .lateral .lat-cab{ padding:0 0 14px 8px; }
  .lateral .lat-cab .lat-logo{ font-size:22px; }
  .lat-cerrar{ width:32px; height:32px; } .lat-cerrar svg{ width:20px; height:20px; }
  .lateral .lateral-quien{ padding:2px 6px 14px; gap:10px; }
  .lateral .lateral-quien .avatar{ width:40px; height:40px; font-size:16px; flex:0 0 auto; }
  .lateral .quien-texto{ min-width:0; }
  .lateral .quien-nom{ font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lateral .quien-rol{ font-size:13px; }
  .lateral .navitem{ font-size:15.5px; padding:11px 10px; gap:12px; }
  .lateral .navitem .ic{ width:21px; height:21px; }
  .lateral .salir-link{ font-size:15.5px; }
}
/* Su pedido: en el teléfono caben 4 tarjetas chiquitas en una fila y se desliza para ver más; All Projects sube */
@media (min-width:900px){ .recientes .tarj:nth-child(n+5){ display:none; } }
@media (max-width:899px){
  .recientes{ display:grid; grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:calc((100% - 24px) / 4); gap:8px; overflow-x:auto; overflow-y:hidden; touch-action:pan-x pan-y; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 0 18px; padding:2px 0 4px; }
  .recientes .tarj{ scroll-snap-align:start; border-radius:10px; }
  .recientes .tarj-foto{ height:64px; }
  .recientes .tarj-foto .sin-foto small{ display:none; }
  .recientes .tarj-foto .sin-foto .ic{ width:20px; height:20px; }
  .recientes .tarj .mas-btn.flot{ display:none; }
  .tarj-hace{ top:4px; right:4px; font-size:10px; padding:1px 6px; }
  .recientes .tarj-cuerpo{ padding:6px 6px 7px; }
  .recientes .tarj-nom{ font-size:12px; line-height:1.2; }
  .recientes .tarj-dir{ font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .recientes .tarj-dir + .tarj-dir{ display:none; }
  .recientes .tarj .pill{ margin-top:4px; font-size:9.5px; padding:1px 6px; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  .recientes .tarj-ult{ display:none; }
  .rec-puntos{ display:none !important; }
}
/* Su pedido (teléfono): la fecha sube al lado del Welcome, más chica; el subtítulo más chico */
@media (max-width:899px){
  #pInicio .bienv{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:10px; align-items:end; margin:0 0 14px; }
  #pInicio .bienv > div:first-child{ display:contents; }
  #pInicio .bienv-t{ grid-column:1; grid-row:1; font-size:27px; }
  #pInicio .bienv-sub{ grid-column:1 / -1; grid-row:2; font-size:13.5px; margin-top:4px; }
  #pInicio .bienv-fecha{ grid-column:2; grid-row:1; padding:0 0 3px; font-size:12px; line-height:1.25; text-align:right; white-space:normal; max-width:96px; }
}

/* Su pedido: el menú de la computadora queda fijo, un poco más angosto */
@media (min-width:900px){
  .lateral{ width:222px; flex:0 0 222px; padding:28px 14px 20px; }
  .lat-logo{ font-size:30px; padding:0 10px 30px; }
  .navitem{ gap:13px; padding:12px 13px; margin-bottom:6px; font-size:15.5px; }
  .navitem .ic{ width:22px; height:22px; }
}
.tu-pre{ font-style:normal; }
/* Su pedido (teléfono): la bienvenida un poquito más chica */
@media (max-width:899px){
  #pInicio .bienv-t{ font-size:23px; }
  #pInicio .bienv-sub{ font-size:12.5px; margin-top:3px; }
}
/* Su pedido (computadora): Home usa todo el ancho que dejó el menú más angosto, con orillas chicas */
@media (min-width:900px){
  main:has(> #pInicio:not([hidden])){ padding-left:24px; padding-right:24px; }
  #pInicio.pantalla{ max-width:none; }
  body:has(#pInicio:not([hidden])) .tope, body:has(#pInicio:not([hidden])) .tope{ padding-left:24px; padding-right:24px; }
}
@media (min-width:1220px){
  body:has(#pInicio:not([hidden])) .tope{ padding-left:24px; padding-right:24px; }
}
/* Su pedido (teléfono): sin la fecha en Home */
@media (max-width:899px){ #pInicio .bienv-fecha{ display:none; } #pInicio .bienv{ grid-template-columns:minmax(0,1fr); } }
/* Su pedido: la cabecera del proyecto cuadra — la foto mide lo mismo que el bloque de texto */
.pcab{ align-items:stretch; }
.pcab .portada{ height:auto; min-height:76px; align-self:stretch; }
.pcab .portada img{ width:100%; height:100%; object-fit:cover; display:block; }
.pcab-acc{ align-self:start; }
.pcab-datos{ justify-content:center; gap:4px; }
.pcab-etqs{ margin:4px 0 0; }
@media (min-width:900px){ .pcab .portada{ width:150px; height:auto; } }
/* Teléfono: junto a la foto van nombre, dirección y PM/Created; las etiquetas pasan abajo a todo lo ancho (así la foto cuadra) */
@media (max-width:899px){
  .pcab{ grid-template-columns:84px minmax(0,1fr) auto; grid-template-rows:auto auto auto auto auto; column-gap:12px; row-gap:3px; align-items:start; }
  .pcab .portada{ grid-column:1; grid-row:1 / 4; width:84px; height:100%; min-height:84px; }
  .pcab-datos{ display:contents; }
  .pcab-t{ grid-column:2; grid-row:1; }
  .pcab-dir{ grid-column:2; grid-row:2; }
  .pcab-meta{ grid-column:2; grid-row:3; flex-direction:column; align-items:flex-start; font-size:12.5px; line-height:1.35; }
  .pcab-meta .sep{ display:none; }
  .pcab-acc{ grid-column:3; grid-row:1 / 3; }
  .pcab-etqs{ grid-column:1 / -1; grid-row:4; margin-top:8px; }
  .pcab .solo-movil-i{ grid-column:1 / -1; grid-row:5; }
}
.field[hidden]{ display:none !important; }
/* Teléfono: "PM | Created" en la misma línea */
@media (max-width:899px){
  .pcab-meta{ flex-direction:row; flex-wrap:wrap; align-items:baseline; font-size:12px; }
  .pcab-meta .sep{ display:inline; margin:0 5px; }
}
@media (max-width:899px){ .pcab-meta{ grid-column:2 / -1; white-space:nowrap; } }
/* Su pedido (teléfono): las etiquetas suben al lado de la foto, como en la web, en una fila que se desliza de lado;
   si son muchas se esconden bajo la orilla (nunca encima de la foto) y se sacan deslizando. */
@media (max-width:899px){
  .pcab .portada{ grid-row:1 / 5; }
  .pcab-etqs{ grid-column:2 / -1; grid-row:4; margin-top:4px; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; touch-action:pan-x pan-y; scrollbar-width:none; min-width:0; }
  .pcab-etqs::-webkit-scrollbar{ display:none; }
  .pcab-etqs > *{ flex:0 0 auto; }
  .pcab-etqs .enlace-editar.solo-compu{ display:inline-flex !important; white-space:nowrap; }
  .pcab .solo-movil-i{ display:none; }
}
/* Su pedido (computadora): letras de la cabecera más grandes, como antes, y la foto más cuadrada */
@media (min-width:900px){
  .pcab{ grid-template-columns:150px minmax(0,1fr) auto; gap:22px; }
  .pcab .portada{ width:150px; border-radius:14px; }
  .pcab-t{ font-size:30px; }
  .pcab-dir{ font-size:16.5px; }
  .pcab-meta{ font-size:15.5px; }
  .pcab-datos{ gap:7px; padding:4px 0; }
  .pcab-etqs{ margin-top:6px; }
  .pcab-etqs .etq-c{ font-size:13.5px; padding:4px 10px; }
}
@media (min-width:900px){ .pcab{ grid-template-columns:140px minmax(0,1fr) auto; } .pcab .portada{ width:140px; } }
@media (max-width:899px){ .pcab-meta{ font-size:13px; } .pcab-dir{ font-size:14px; } }
@media (max-width:899px){ .pcab{ grid-template-columns:92px minmax(0,1fr) auto; } .pcab .portada{ width:92px; } }
/* La foto de la portada NUNCA estira el cuadro (las fotos del teléfono son verticales): se recorta dentro de un cuadro
   que mide lo mismo que el texto. */
.pcab .portada{ position:relative; }
.pcab .portada img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- 13-oct: su diseño de la ficha (Photos sin pestaña Rooms, "View by", PM y Created en su línea) ---------- */
.pm-largo{ display:none; }
@media (min-width:900px){
  .pm-largo{ display:inline; } .pcab-meta .pm-corto{ display:none; }
  .pcab .pcab-meta{ flex-direction:column; align-items:flex-start; gap:2px; }
  .pcab .pcab-meta .sep{ display:none; }
  .pcab .pcab-etqs{ margin:2px 0 4px; }
}
.ver-por{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:14.5px; font-weight:600; color:var(--accent); background:var(--card); border:1.5px solid var(--accent); border-radius:10px; padding:7px 12px; cursor:pointer; }
.ver-por .ic{ width:16px; height:16px; }
.menu-pop .menu-ok{ margin-left:auto; color:var(--accent) !important; }
.menu-pop button.on{ color:var(--accent); }
.menu-pop .menu-sep{ border-top:1px solid var(--line); margin:6px 4px; }
.menu-pop .menu-cab{ margin:6px 10px 2px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); }
.pcuartos-cab{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 12px; }
.pcuartos-cab .sec-t{ margin:0; }
.pcuartos-cab .volver{ padding:4px 0; }

/* 13-oct, su pedido: en el teléfono la vista de CUADROS pone todas las fotos en cuadros, 4 por fila (como la galería).
   La vista de LISTA no cambia. Mover/Borrar siguen al abrir la foto (•••) o con Select. */
@media (max-width:899px){
  .pgrid.grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:3px; }
  .pgrid.grid .pfoto .ffoto{ aspect-ratio:1 / 1; border-radius:4px; }
  .pgrid.grid .pfoto-pie{ display:none; }
  .pgrupo h4{ margin:4px 0 8px; }
}
.pfoto .pfoto-check .ic{ position:static; transform:none; top:auto; left:auto; color:#fff; }   /* la palomita de Select no la mueve la regla de iconos de la foto */

/* 13-oct, su pedido: flechita junto a "First Floor Photos (2)" en el teléfono para regresar a todas las fotos */
.ptitulo .sec-t{ display:flex; align-items:center; gap:6px; }
.ptitulo-atras{ display:inline-grid; place-items:center; width:32px; height:32px; margin-left:-6px; border:0; border-radius:50%; background:none; color:var(--accent); cursor:pointer; flex:none; }
.ptitulo-atras .ic{ width:20px; height:20px; stroke-width:2.4; }
.ptitulo-atras:active{ background:var(--bg2); }
@media (min-width:900px){ .ptitulo-atras{ display:none !important; } }

/* ---------- 13-oct: pestaña Floor Plan (su diseño: Levels | plano | Plan Details; en el teléfono, piso arriba y botones abajo) ---------- */
.pl-cab{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:4px 0 14px; }
.pl-cab-t .sec-t{ margin:0; font-size:22px; }
.pl-cab-t p{ margin:2px 0 0; color:var(--ink-soft); font-size:14px; }
.pl-cab-acc{ display:flex; gap:10px; flex-wrap:wrap; }
.pl-cab-acc .btn, .pl-tel-acc .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.pl-cab-acc .btn .ic, .pl-tel-acc .btn .ic{ width:18px; height:18px; }
.pl-cuerpo{ display:grid; grid-template-columns:220px minmax(0,1fr) 230px; gap:16px; align-items:start; }
.pl-col{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; min-width:0; }
.pl-col h3{ margin:0 0 10px; font-size:16px; font-weight:700; }
.pl-nivel{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; text-align:left; font:inherit; background:none; border:0; border-left:3px solid transparent; border-radius:8px; padding:9px 12px; cursor:pointer; color:var(--ink); }
.pl-nivel + .pl-nivel{ margin-top:2px; }
.pl-nivel b{ font-size:15px; font-weight:600; }
.pl-nivel small{ color:var(--ink-soft); font-size:13px; }
.pl-nivel.on{ background:var(--bg2); border-left-color:var(--accent); }
.pl-nivel.on b{ color:var(--accent); }
.pl-mas-nivel{ margin-top:12px; display:inline-flex; align-items:center; justify-content:center; gap:6px; color:var(--accent); }
.pl-visor{ padding:0; overflow:hidden; }
.pl-visor-cab{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.pl-visor-cab b{ font-size:15px; }
.pl-fecha{ color:var(--ink-soft); font-size:13px; padding-left:10px; border-left:1px solid var(--line); }
.pl-esp{ flex:1; }
.pl-seg{ display:inline-flex; background:var(--bg2); border-radius:9px; padding:3px; }
.pl-seg button{ font:inherit; font-size:13px; font-weight:600; border:0; background:none; color:var(--ink-soft); padding:6px 14px; border-radius:7px; cursor:pointer; }
.pl-seg button.on{ background:var(--accent); color:#fff; }
.pl-seg button[disabled]{ opacity:.45; cursor:default; }   /* 3D sin plano en el nivel (17-oct) */
.pl-rej{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:13px; font-weight:600; border:0; background:none; color:var(--ink-soft); cursor:pointer; padding:6px 4px; }
.pl-rej.on{ color:var(--ink); }
.pl-rej .ic{ width:18px; height:18px; }
.pl-zoomer{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:9px; background:var(--card); }
.pl-zoomer button{ width:32px; height:32px; border:0; background:none; cursor:pointer; color:var(--ink); display:grid; place-items:center; }
.pl-zoomer .ic{ width:16px; height:16px; }
.pl-zoomer span{ min-width:46px; text-align:center; font-size:13px; font-weight:600; }
.pl-grande-btn{ width:34px; height:34px; border:1px solid var(--line); border-radius:9px; background:var(--card); display:grid; place-items:center; cursor:pointer; color:var(--ink); }
.pl-grande-btn .ic{ width:17px; height:17px; }
.pl-lienzo{ overflow:auto; max-height:70vh; padding:10px; background:#fff; }
.pl-lienzo.rejilla{ background-color:#fff; background-image:linear-gradient(#eef2f8 1px, transparent 1px), linear-gradient(90deg, #eef2f8 1px, transparent 1px); background-size:22px 22px; }
.pl-zoom{ margin:0 auto; min-width:100%; }
.pl-zoom svg{ display:block; width:100%; height:auto; }
.pl-vacio{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:56px 20px; color:var(--ink-soft); }
.pl-vacio h3{ margin:4px 0 0; color:var(--ink); font-size:17px; }
.pl-vacio p{ margin:0; max-width:360px; }
.pl-vacio-ic{ width:44px; height:44px; color:var(--accent); }
.pl-det{ display:flex; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px; }
.pl-det span{ color:var(--ink-soft); }
.pl-det b{ font-weight:600; }
.pl-detalles .btn{ margin-top:16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; color:var(--accent); }
.pl-detalles .btn .ic{ width:18px; height:18px; }
.pl-nada{ color:var(--ink-soft); font-size:14px; margin:0; }
.pl-tel-barra, .pl-tel-resumen, .pl-tel-acc, .pl-tel-flota, .pl-tel-niveles{ display:none; }
.pl-grande{ position:absolute; inset:0; z-index:40; background:#fff; display:flex; flex-direction:column; }
.pl-grande[hidden]{ display:none !important; }
.pl-grande-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top)); border-bottom:1px solid var(--line); }
.pl-grande-x{ width:38px; height:38px; border:0; border-radius:50%; background:var(--bg2); font-size:18px; cursor:pointer; }
.pl-grande-lienzo{ flex:1; overflow:auto; padding:10px; }
.pl-grande-lienzo svg{ display:block; width:100%; height:auto; min-width:700px; }
#panel-plano .aviso.ok{ color:#15803d; }
/* Planos esperando señal (16-oct, Aroldo en un sótano): el escaneo quedó en el teléfono y se sube solo. */
#panel-plano .pl-pend{ display:flex; align-items:center; gap:10px; margin:10px 0 0; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); font-size:14px; color:var(--ink); }
#panel-plano .pl-pend .ic{ width:20px; height:20px; flex:none; color:var(--accent); }
#panel-plano .pl-pend span{ flex:1; min-width:0; line-height:1.35; }
#panel-plano .pl-pend small{ color:var(--ink-soft); font-size:12.5px; }
#panel-plano .pl-pend .btn{ flex:none; min-height:36px; padding:0 12px; }
/* (17-oct) Home: un escaneo del plano que quedó en el teléfono sin guardar (el mismo estilo de la franja de Floor Plan). */
.ini-planos{ display:flex; flex-direction:column; gap:8px; margin:0 0 14px; }
.ini-planos[hidden]{ display:none; }
.ini-plano{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); font-size:14px; color:var(--ink); }
.ini-plano .ic{ width:20px; height:20px; flex:none; color:var(--accent); }
.ini-plano span{ flex:1; min-width:0; line-height:1.35; }
.ini-plano small{ color:var(--ink-soft); font-size:12.5px; }
.ini-plano .btn{ flex:none; min-height:36px; padding:0 12px; }
@media (max-width:1180px) and (min-width:900px){ .pl-cuerpo{ grid-template-columns:190px minmax(0,1fr); } .pl-detalles{ grid-column:1 / -1; } }
@media (max-width:899px){
  .pl-cab, .pl-niveles, .pl-detalles, .pl-visor-cab{ display:none; }
  .pl-cuerpo{ display:block; }
  .pl-tel-barra{ display:flex; align-items:center; gap:10px; margin:2px 0 12px; }
  .pl-sel{ flex:1; }
  /* Cada nivel es una tarjeta que se abre y se cierra (16-oct, como los días del Dry Log). */
  .pl-tel-niveles{ display:flex; flex-direction:column; gap:8px; margin:0 0 10px; }
  .pl-tel-niv{ display:flex; align-items:center; gap:10px; width:100%; min-height:52px; padding:10px 14px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--sombra); color:var(--ink); text-align:left; font:inherit; cursor:pointer; }
  .pl-tel-niv-t{ display:flex; flex-direction:column; gap:1px; min-width:0; }
  .pl-tel-niv-t b{ font-size:16px; }
  .pl-tel-niv-t small{ color:var(--ink-soft); font-size:12.5px; }
  .pl-tel-niv-t small.pl-tel-niv-ed{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }   /* (17-oct) plano editado a mano: un solo renglón */
  .pl-tel-niv.on{ border-color:var(--accent); }
  .pl-tel-niv-flecha{ flex:none; margin-left:auto; width:18px; height:18px; color:var(--ink-mute); transition:transform .15s; }
  .pl-tel-niv.on .pl-tel-niv-flecha{ transform:rotate(180deg); }
  #panel-plano.pl-cerrado .pl-cuerpo, #panel-plano.pl-cerrado .pl-tel-editar, #panel-plano.pl-cerrado [data-pl-exportar]{ display:none; }
  .pl-visor{ position:relative; border-radius:16px; }
  .pl-lienzo{ max-height:none; min-height:260px; padding:8px; }
  .pl-tel-flota{ display:flex; flex-direction:column; gap:8px; position:absolute; right:10px; top:10px; z-index:2; }
  .pl-tel-flota .pl-zoomer{ flex-direction:column; }
  .pl-tel-flota .pl-zoomer span{ display:none; }
  .pl-tel-flota .pl-zoomer button, .pl-tel-flota .pl-grande-btn{ width:40px; height:40px; }
  .pl-tel-resumen{ display:flex; flex-direction:column; gap:3px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin:12px 0; }
  .pl-tel-resumen b{ font-size:18px; }
  .pl-tel-resumen span{ color:var(--ink-soft); font-size:14px; }
  .pl-tel-resumen small{ color:var(--ink-mute); font-size:12.5px; }
  .pl-tel-acc{ display:flex; flex-direction:column; gap:10px; }
  .pl-tel-dos{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .pl-chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
  .pl-chips::-webkit-scrollbar{ display:none; }
  .pl-chip{ flex:none; font:inherit; font-size:14px; font-weight:600; padding:9px 16px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
  .pl-chip.on{ background:#e8f0fe; border-color:var(--accent); color:var(--accent); }
  .pl-chip-mas{ border-style:dashed; color:var(--accent); }
  .pl-chip .ic{ width:15px; height:15px; }
}

/* 13-oct, su pedido: en la computadora el plano tiene la prioridad: entra completo en lo que queda de pantalla, columnas de los lados más angostas */
@media (min-width:900px){
  .pl-cuerpo{ grid-template-columns:190px minmax(0,1fr) 200px; gap:12px; }
  .pl-col{ padding:12px; }
  .pl-lienzo{ max-height:none; height:max(380px, calc(100vh - 520px)); padding:8px; }
  .pl-lienzo.ajustado{ overflow:hidden; }
  .pl-lienzo.ajustado .pl-zoom{ width:100%; height:100%; }
  .pl-lienzo.ajustado .pl-zoom svg{ width:100%; height:100%; }
  .pl-cab{ margin:0 0 10px; }
}
@media (max-width:1180px) and (min-width:900px){ .pl-cuerpo{ grid-template-columns:170px minmax(0,1fr); } }

/* 13-oct, su pedido (cuadro azul): en la computadora los botones del plano suben a la derecha de la barra de pestañas
   y el renglón del título se quita, para que el plano suba y aproveche el espacio. Los botones no tapan las pestañas.
   (18-oct, prueba en vivo) Con la ventana angosta tapaban "Measurements": si se enciman con una pestaña (planos.js,
   botonesSinTapar), el panel lleva .pl-cab-renglon y los botones van en su renglón, arriba del plano, como en pantallas chicas. */
@media (min-width:1180px){
  #panel-plano .pl-cab{ margin:-56px 0 10px; min-height:0; justify-content:flex-end; pointer-events:none; position:relative; z-index:3; }
  #panel-plano .pl-cab-t{ display:none; }
  #panel-plano .pl-cab-acc{ pointer-events:auto; }
  #panel-plano .pl-cab-acc .btn{ min-height:38px; padding-top:6px; padding-bottom:6px; }
}
#panel-plano.pl-cab-renglon .pl-cab{ margin:0 0 10px; justify-content:space-between; pointer-events:auto; }
#panel-plano.pl-cab-renglon .pl-cab-t{ display:block; }

/* 13-oct, su diseño del teléfono + "en esta vista solo el plano, lo más visible posible":
   el plano llena su cuadro y queda centrado (en todos los tamaños), + arriba de −, y el ••• con la cuadrícula. */
.pl-lienzo.ajustado{ overflow:hidden; }
.pl-lienzo.ajustado .pl-zoom{ width:100%; height:100%; }
.pl-lienzo.ajustado .pl-zoom svg{ width:100%; height:100%; }
.pl-mas-wrap{ position:relative; display:none; }
.pl-mas-btn{ width:44px; height:38px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink-soft); font:inherit; font-size:14px; letter-spacing:1px; cursor:pointer; }
.pl-menu{ position:absolute; right:0; top:44px; z-index:5; min-width:190px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 28px rgba(15,30,60,.16); padding:6px; display:flex; flex-direction:column; }
.pl-menu[hidden]{ display:none; }
.pl-menu button{ display:flex; align-items:center; gap:10px; font:inherit; font-size:14px; font-weight:600; color:var(--ink); background:none; border:0; border-radius:8px; padding:11px 12px; text-align:left; cursor:pointer; }
.pl-menu button:hover{ background:var(--bg2); }
.pl-menu button.pl-menu-rojo{ color:var(--danger); border-top:1px solid var(--line); border-radius:0 0 8px 8px; margin-top:4px; }
.pl-menu .ic{ width:17px; height:17px; color:var(--ink-soft); }
@media (max-width:899px){
  .pl-mas-wrap{ display:block; }
  .pl-tel-barra .pl-seg button{ padding:7px 18px; }
  .pl-lienzo{ min-height:0; }
  .pl-tel-flota .pl-zoomer{ flex-direction:column-reverse; }
}
/* Expandido: el plano entero a toda la pantalla (sin la hoja del PDF). */
.pl-grande-lienzo{ display:flex; min-height:0; }
.pl-grande-lienzo svg{ width:100%; height:100%; min-width:0; }
/* 13-oct (su foto, lo azul "muy grande"): el resumen y los botones del teléfono más compactos, como su diseño. */
@media (max-width:899px){
  #panel-plano .pl-tel-resumen{ gap:1px; padding:10px 14px; margin:10px 0 8px; border-radius:12px; }
  #panel-plano .pl-tel-resumen b{ font-size:16px; }
  #panel-plano .pl-tel-resumen span{ font-size:13px; }
  #panel-plano .pl-tel-resumen small{ font-size:12px; }
  #panel-plano .pl-tel-acc{ gap:8px; }
  #panel-plano .pl-tel-acc .btn{ min-height:0; height:40px; padding-top:0; padding-bottom:0; font-size:14.5px; }
  #panel-plano .pl-tel-dos{ gap:8px; }
  #panel-plano .pl-chips .pl-chip{ font-size:13px; padding:6px 13px; border-radius:9px; }
}
/* 13-oct: el plano se acerca con los dedos; acercado, un dedo lo mueve (no la página). */
.pl-lienzo.ajustado, .pl-grande-lienzo{ touch-action:pan-y; }
.pl-lienzo.ajustado.pz-cerca, .pl-grande-lienzo.pz-cerca{ touch-action:none; }
.pl-grande-lienzo{ overflow:hidden; }
/* 13-oct: en el teléfono la página del plano queda quieta (todo cabe en una pantalla); un dedo sobre el plano no mueve la página. */
@media (max-width:899px){
  body.pl-fijo #main{ overflow:hidden; padding-bottom:10px; }
  /* Su pedido (13-oct): más espacio al plano en el teléfono. El aviso vacío de la ficha y el margen de abajo ya
     no se comen espacio; el cuadro del plano se lleva lo que sobra (medir() en planos.js). */
  body.pl-fijo #fichaAviso:empty{ display:none; }
  /* Su pedido (13-oct): el botón de pantalla completa sale de encima del plano y va junto a Edit Floor Plan. */
  #panel-plano .pl-tel-editar{ display:flex; gap:8px; }
  #panel-plano .pl-tel-editar [data-pl-editar]{ flex:1; }
  #panel-plano .pl-tel-editar .pl-tel-grande{ flex:none; width:52px; padding:0; }
  #panel-plano .pl-tel-editar .pl-tel-grande .ic{ width:20px; height:20px; }
  body.pl-fijo #panel-plano .pl-lienzo.ajustado{ padding:2px; }
  /* Su escogida (13-oct): el cuadro del plano de orilla a orilla del teléfono (sin el margen de la página a los
     lados): el plano crece y se sigue viendo entero. Los botones se quedan donde estaban. */
  body.pl-fijo #panel-plano .pl-visor{ margin-left:-18px; margin-right:-18px; border-radius:0; border-left:0; border-right:0; }
  body.pl-fijo .pl-lienzo.ajustado{ touch-action:none; }
}
/* 14-oct, su pedido: en la computadora la cabecera va IGUAL que en el teléfono: nombre, dirección,
   "PM: x | Created: fecha" en una línea, y las etiquetas con Edit Labels abajo. */
@media (min-width:900px){
  .pcab .pcab-meta{ order:3; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:0; }
  .pcab .pcab-meta .sep{ display:inline; margin:0 8px; }
  .pcab .pcab-meta .pm-largo{ display:none; }
  .pcab .pcab-meta .pm-corto{ display:inline; }
  .pcab .pcab-etqs{ order:4; margin:6px 0 0; }
}

/* 14-oct, su pedido: en la computadora el Back del proyecto sube a la fila del buscador (el hueco de arriba a la
   izquierda) y su renglón de abajo desaparece, así el plano gana ese alto. El teléfono no cambia. */
.tope .tope-volver{ display:none; }
@media (min-width:900px){
  body:has(#pTrabajo:not([hidden])) .tope .tope-volver{ display:inline-flex; margin-right:auto; margin-left:max(0px, calc((100% - 1560px) / 2)); padding:0; align-self:center; }   /* misma orilla que el proyecto (centrado, máx. 1560) */
  body:has(#pTrabajo:not([hidden])) .ptrabajo-main > .volver{ display:none; }
}

/* El aviso de aparato nuevo (13-oct): barra azul arriba (absolute: body no se desplaza, solo main), solo dentro de la app del iPhone. */
.barra-aparato{ position:absolute; left:12px; right:12px; top:calc(10px + env(safe-area-inset-top)); z-index:200; display:flex; align-items:center; gap:10px; padding:12px 12px 12px 16px; border-radius:14px; background:#2563eb; color:#fff; font-size:14px; line-height:1.35; box-shadow:0 10px 30px rgba(10,17,35,.28); cursor:pointer; }
.barra-aparato span{ flex:1; }
.barra-aparato button{ flex:0 0 auto; width:30px; height:30px; border:0; border-radius:50%; background:rgba(255,255,255,.2); color:#fff; font-size:14px; cursor:pointer; }

/* ===== Dry Log (14-oct): su pedido, la app es para compañías de water damage. Azul = seco, ámbar = mojado; nada verde. ===== */
#panel-secado .subtabs.tres, .seco-forma .subtabs.tres{ grid-template-columns:repeat(3,1fr); }
.seco-aviso{ margin:0 0 12px; }
.seco-res{ display:flex; flex-direction:column; gap:12px; }
.seco-dia{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.seco-dia-n{ font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--accent); line-height:1; }
.seco-dia-t{ color:var(--ink-soft); font-size:15px; }
.seco-barra{ height:8px; border-radius:99px; background:var(--bg2); overflow:hidden; }
.seco-barra i{ display:block; height:100%; background:var(--accent); border-radius:99px; }
.seco-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.seco-chip{ font-size:13.5px; font-weight:600; color:var(--ink-soft); background:var(--bg2); border-radius:99px; padding:6px 11px; }
.seco-chip.listo{ color:var(--accent); background:var(--accent-soft); }
.seco-hoy{ width:100%; }
.seco-vacio{ text-align:center; }
.seco-vacio h3{ margin:6px 0 6px; font-size:18px; }
.seco-vacio p{ color:var(--ink-soft); line-height:1.5; margin:0 0 14px; font-size:15px; }
.seco-vacio-ic .ic{ width:34px; height:34px; color:var(--accent); }
.seco-grupo{ margin-bottom:16px; }
.seco-grupo h4, .seco-h4{ margin:0 0 8px; font-size:15.5px; font-weight:700; }
.seco-grupo h4 small, .seco-h4 small, .seco-amb h4 small{ color:var(--ink-mute); font-weight:500; font-size:13px; margin-left:4px; }
.seco-h3{ margin:22px 0 10px; font-size:17px; font-weight:700; }
.seco-nota{ color:var(--ink-soft); font-size:13px; line-height:1.45; margin:0 0 12px; }
.seco-punto{ display:block; width:100%; text-align:left; font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:8px; cursor:pointer; box-shadow:var(--sombra); }
.seco-p-cab{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.seco-p-cab small, .seco-in small, .seco-eq small{ display:block; color:var(--ink-soft); font-size:13px; margin-top:2px; font-weight:400; }
.seco-est{ flex:0 0 auto; font-size:12.5px; font-weight:700; color:var(--ink-soft); background:var(--bg2); border-radius:99px; padding:4px 10px; white-space:nowrap; }
.seco-est.seco{ color:var(--accent); background:var(--accent-soft); }
.seco-est.mojado{ color:#8a6508; background:var(--warn-soft); }
.seco-dias{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin-top:10px; padding-bottom:2px; }
.seco-dias::-webkit-scrollbar{ display:none; }
.seco-d{ flex:0 0 auto; min-width:58px; display:flex; flex-direction:column; align-items:center; gap:1px; background:var(--bg2); border-radius:9px; padding:6px 8px; }
.seco-d small{ color:var(--ink-mute); font-size:11px; line-height:1.2; }
.seco-d b{ font-size:16px; margin-top:2px; font-variant-numeric:tabular-nums; }
.seco-d b.alto{ color:#8a6508; }
.seco-d b.bien{ color:var(--accent); }
.seco-amb h4{ margin:0 0 8px; font-size:15.5px; }
.seco-amb-fila{ display:grid; grid-template-columns:minmax(0,1fr) 60px 52px 62px; gap:8px; align-items:center; padding:8px 0; border-top:1px solid var(--line); font-size:14.5px; font-variant-numeric:tabular-nums; }
.seco-amb-fila.cab{ border-top:0; color:var(--ink-mute); font-size:12px; font-weight:600; padding-top:0; }
.seco-amb-fila.dos{ grid-template-columns:minmax(0,1fr) auto; }
.seco-amb-fila span:first-child{ overflow-wrap:anywhere; line-height:1.3; }
.seco-amb-fila b{ color:var(--accent); text-align:right; }
.seco-amb .seco-nota{ margin:10px 0 0; }
.seco-eq{ display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:8px; box-shadow:var(--sombra); }
.seco-eq.quitado{ opacity:.7; box-shadow:none; }
.seco-eq-dato{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:12px; font:inherit; color:var(--ink); text-align:left; background:none; border:0; padding:0; cursor:pointer; }
.seco-eq-n{ flex:0 0 auto; width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-weight:800; font-size:17px; }
.seco-eq .btn{ flex:0 0 auto; }
.seco-forma .field{ margin-bottom:14px; }
.seco-forma .field .subtabs{ margin-bottom:0; }
.seco-in{ display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.seco-in > span:first-child{ flex:1 1 auto; min-width:0; }
.seco-in input{ flex:0 0 auto; width:78px; height:44px; font:inherit; font-size:16px; text-align:center; color:var(--ink); background:var(--card); border:1px solid var(--line2); border-radius:10px; padding:0 6px; }
.seco-in input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.18); }
.seco-in.amb{ flex-wrap:wrap; }
.seco-in.amb > span:first-child{ flex:1 1 100%; }
.seco-in.amb input{ width:84px; }
.seco-gpp{ font-weight:700; color:var(--accent); font-size:14.5px; font-variant-numeric:tabular-nums; }
.seco-borrar{ width:100%; margin-top:18px; }
.seco-forma > .sec-t{ margin-bottom:14px; }
.seco-mini{ display:flex; flex-direction:column; gap:3px; }
.seco-mini small{ color:var(--ink-mute); font-size:11.5px; font-weight:600; margin:0; }
.seco-in.amb .seco-gpp{ align-self:flex-end; padding-bottom:12px; }
.seco-clima{ flex:1 1 100%; margin:2px 0 0; color:var(--ink-soft); font-size:12.5px; line-height:1.45; }
.seco-clima:empty{ display:none; }
.seco-clima-btn{ font:inherit; font-size:12.5px; font-weight:700; color:var(--accent); background:none; border:0; padding:2px 0; cursor:pointer; }

/* ===== Dry Logs (14-oct, su diseño): "No dry logs yet" y New Dry Log paso a paso. Azul Scanova, nada verde. ===== */
.dl-vacio{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:56px 16px 40px; }
.dl-vacio-ic{ width:96px; height:96px; border-radius:50%; background:var(--accent-soft); display:grid; place-items:center; margin-bottom:22px; }
.dl-vacio-ic .ic{ width:44px; height:44px; color:var(--accent); stroke-width:1.6; }
.dl-vacio h2{ margin:0 0 10px; font-size:22px; font-weight:700; letter-spacing:-.01em; }
.dl-vacio p{ margin:0 0 20px; color:var(--ink-soft); font-size:15.5px; line-height:1.45; }
.dl-vacio small{ margin-top:16px; color:var(--ink-mute); font-size:13px; line-height:1.45; }
.dl-empezar{ padding:0 22px; }
.dl-paso{ padding:22px 20px 18px; }
.dl-paso-n{ margin:0 0 6px; color:var(--ink-soft); font-size:13.5px; }
.dl-paso-t{ margin:0 0 6px; font-size:22px; font-weight:700; letter-spacing:-.015em; line-height:1.2; }
.dl-paso-t small{ color:var(--ink-mute); font-size:15px; font-weight:500; margin-left:6px; }
.dl-paso-sub{ margin:0 0 18px; color:var(--ink-soft); font-size:15px; line-height:1.45; }
.dl-sec{ margin:0 0 10px; font-size:15.5px; font-weight:700; }
.dl-sec small{ color:var(--ink-mute); font-size:13px; font-weight:500; }
.dl-niveles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-bottom:20px; }
.dl-cuartos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-bottom:8px; }
.dl-op{ position:relative; display:flex; align-items:center; gap:14px; min-height:64px; padding:14px 40px 14px 16px; font:inherit; color:var(--ink); text-align:left; background:var(--card); border:1px solid var(--line2); border-radius:10px; cursor:pointer; }
.dl-op:hover{ border-color:var(--accent); }
.dl-op.on{ border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent) inset; }
.dl-op .dl-op-ic{ width:30px; height:30px; stroke-width:1.5; color:var(--ink); }
.dl-op-txt{ display:flex; flex-direction:column; min-width:0; }
.dl-op-txt b{ font-size:15px; font-weight:600; overflow-wrap:break-word; hyphens:none; }
.dl-op-txt small{ color:var(--ink-soft); font-size:13px; margin-top:2px; }
.dl-cuarto{ align-items:flex-end; min-height:74px; padding-top:12px; }
.dl-cuarto .dl-op-ic{ align-self:flex-start; }
.dl-cuarto .dl-op-txt b{ font-weight:500; font-size:14.5px; }
.dl-radio{ position:absolute; top:12px; right:12px; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--ink-mute); background:var(--card); }
.dl-radio.on{ border-color:var(--accent); box-shadow:inset 0 0 0 3.5px var(--card); background:var(--accent); }
.dl-falta{ background:var(--bg2); border-radius:10px; padding:14px; margin-bottom:16px; color:var(--ink-soft); font-size:14px; line-height:1.45; }
.dl-falta p{ margin:0 0 8px; }
.dl-falta p:last-child{ margin:0; }
.dl-pie{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.dl-atras{ display:inline-flex; align-items:center; gap:4px; font:inherit; font-size:15px; font-weight:600; color:var(--accent); background:none; border:0; padding:8px 4px; cursor:pointer; }
.dl-atras .ic{ width:18px; height:18px; }
.dl-seguir{ min-width:150px; }
.dl-seguir:disabled{ background:var(--line2); color:#fff; box-shadow:none; cursor:not-allowed; }
@media (max-width:520px){ .dl-cuartos{ grid-template-columns:1fr 1fr; gap:10px; } .dl-niveles{ grid-template-columns:1fr; gap:10px; } .dl-op{ padding-left:12px; gap:10px; } .dl-cuarto{ flex-direction:column; align-items:flex-start; gap:8px; padding-right:34px; } }
/* Dry Logs en la WEB: la tarjeta del paso ocupa toda la pantalla (el alto lo pone drylog.js) y todo se agranda. */
@media (min-width:900px){
  .dl-paso{ display:flex; flex-direction:column; padding:24px 30px 20px; margin-bottom:-32px; }
  .dl-paso .dl-pie{ margin-top:auto; padding-top:16px; }
  .dl-paso-n{ font-size:14.5px; margin-bottom:8px; }
  .dl-paso-t{ font-size:28px; margin-bottom:6px; }
  .dl-paso-sub{ font-size:16px; margin-bottom:22px; }
  .dl-sec{ font-size:16.5px; margin-bottom:12px; }
  .dl-niveles{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-bottom:24px; }
  .dl-cuartos{ grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
  .dl-op{ min-height:80px; padding:16px 48px 16px 20px; gap:16px; border-radius:12px; }
  .dl-op .dl-op-ic{ width:36px; height:36px; }
  .dl-op-txt b{ font-size:17px; }
  .dl-op-txt small{ font-size:14.5px; margin-top:4px; }
  .dl-cuarto{ min-height:104px; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:12px; }
  .dl-cuarto .dl-op-txt b{ font-size:16px; }
  .dl-radio{ top:16px; right:16px; width:20px; height:20px; }
  .dl-atras{ font-size:16px; }
  .dl-seguir{ min-width:190px; min-height:48px; font-size:16px; }
}

/* ===== Dry Logs en el TELÉFONO (14-oct, sus 3 diseños): cámara con Level/Room, lectura detectada, lectura guardada + equipo.
   Sin fijar nada a la pantalla (eso falla en su iPhone): la cámara mide lo que sobra (drylog.js medirTel), como el plano. ===== */
.dl-tel{ display:flex; flex-direction:column; gap:12px; }
.dl-tel-cab{ display:flex; align-items:center; gap:10px; }
.dl-tel-cab h2{ margin:0 auto 0 0; font-size:22px; font-weight:700; letter-spacing:-.01em; }
.dl-prog{ display:flex; gap:4px; }
.dl-prog i{ width:22px; height:4px; border-radius:99px; background:var(--line2); }
.dl-prog i.on{ background:var(--accent); }
.dl-prog-n{ color:var(--ink-soft); font-size:14px; white-space:nowrap; }
.dl-tel-sel{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.dl-caja{ position:relative; display:flex; align-items:center; gap:10px; min-height:58px; padding:8px 12px; background:var(--card); border:1px solid var(--line2); border-radius:12px; cursor:pointer; }
.dl-caja .dl-caja-ic{ width:24px; height:24px; color:var(--ink); stroke-width:1.5; }
.dl-caja-txt{ display:flex; flex-direction:column; min-width:0; flex:1; }
.dl-caja-txt small{ color:var(--ink-soft); font-size:12px; }
.dl-caja-txt b{ font-size:16px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-caja .dl-caja-chev{ width:18px; height:18px; color:var(--ink-soft); }
.dl-caja select{ position:absolute; inset:0; width:100%; height:100%; opacity:0; font-size:16px; cursor:pointer; }
.dl-tel-aviso{ display:flex; align-items:center; gap:8px; margin:0; padding:10px 12px; border-radius:10px; background:var(--accent-soft); color:var(--accent); font-size:14px; font-weight:600; }
.dl-tel-aviso .ic{ width:18px; height:18px; flex:none; }
.dl-visor{ position:relative; height:360px; border-radius:14px; overflow:hidden; background:#000; }
.dl-visor video, .dl-visor img{ display:block; width:100%; height:100%; object-fit:cover; }
.dl-visor-foto img{ object-fit:contain; }
.dl-visor-tira{ height:110px; flex:none; }
/* El cuadro guía: donde se pone la pantallita del medidor (lo de adentro es lo que se lee). */
.dl-guia{ position:absolute; left:50%; top:46%; width:72%; aspect-ratio:1.7; max-height:58%; transform:translate(-50%,-50%); border-radius:12px; box-shadow:0 0 0 2000px rgba(0,0,0,.35); pointer-events:none; }
.dl-guia i{ position:absolute; width:26px; height:26px; border:3px solid #fff; }
.dl-guia i:nth-child(1){ left:-2px; top:-2px; border-right:0; border-bottom:0; border-radius:12px 0 0 0; }
.dl-guia i:nth-child(2){ right:-2px; top:-2px; border-left:0; border-bottom:0; border-radius:0 12px 0 0; }
.dl-guia i:nth-child(3){ left:-2px; bottom:-2px; border-right:0; border-top:0; border-radius:0 0 0 12px; }
.dl-guia i:nth-child(4){ right:-2px; bottom:-2px; border-left:0; border-top:0; border-radius:0 0 12px 0; }
.dl-visor-pista{ position:absolute; left:12px; right:12px; bottom:12px; margin:0; text-align:center; color:#fff; font-size:13px; text-shadow:0 1px 3px rgba(0,0,0,.8); }
.dl-visor-aviso{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px; text-align:center; color:#fff; background:rgba(0,0,0,.75); }
.dl-visor-aviso[hidden]{ display:none; }
.dl-visor-aviso p{ margin:0; font-size:14px; line-height:1.45; }
.dl-leido{ display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:14px; background:var(--accent-soft); }
.dl-leido-ic{ flex:none; width:60px; height:60px; border-radius:12px; display:grid; place-items:center; background:var(--card); border:1px solid var(--line2); }
.dl-leido-ic .ic{ width:34px; height:34px; color:var(--accent); stroke-width:1.6; }
.dl-leido-txt{ display:flex; flex-direction:column; min-width:0; }
.dl-leido-txt small{ color:var(--ink-soft); font-size:15px; }
.dl-num{ display:flex; align-items:baseline; gap:2px; }
.dl-num input{ width:1.6em; min-width:0; font:inherit; font-size:46px; font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--ink); background:transparent; border:0; border-bottom:2px dashed transparent; padding:0; }
.dl-num input:focus{ outline:none; border-bottom-color:var(--accent); }
.dl-leido.sin-leer .dl-num input{ border-bottom-color:var(--line2); }
.dl-num span{ font-size:40px; font-weight:800; }
.dl-mat{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dl-mini{ display:flex; flex-direction:column; gap:4px; }
.dl-mini small{ color:var(--ink-soft); font-size:12px; font-weight:600; }
.dl-mini select, .dl-mini input{ height:44px; font:inherit; font-size:16px; color:var(--ink); background:var(--card); border:1px solid var(--line2); border-radius:10px; padding:0 10px; }
.dl-confirma{ margin:0; color:var(--ink-soft); font-size:15px; }
.dl-botones{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dl-botones .btn, .dl-equipo .btn{ min-height:50px; font-size:16px; }
.dl-listo{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; background:var(--accent-soft); color:var(--accent); }
.dl-listo .ic{ flex:none; width:30px; height:30px; padding:6px; border-radius:50%; background:var(--accent); color:#fff; stroke-width:2.6; }
.dl-listo b{ font-size:17px; }
.dl-tarjeta{ padding:14px; border:1px solid var(--line2); border-radius:14px; background:var(--card); }
.dl-tarjeta > small{ display:block; color:var(--ink-soft); font-size:14px; margin-bottom:8px; }
.dl-tarjeta-c{ display:flex; gap:14px; align-items:center; }
.dl-tarjeta-c img{ width:96px; height:96px; flex:none; object-fit:cover; border-radius:10px; background:#000; }
.dl-tarjeta-c b{ display:block; font-size:16px; }
.dl-tarjeta-n{ display:block; font-size:36px; font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.dl-tarjeta-c small{ display:flex; align-items:center; gap:6px; color:var(--ink-soft); font-size:14px; }
.dl-tarjeta-c small .ic{ width:16px; height:16px; }
.dl-equipo{ display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:14px; background:var(--accent-soft); }
.dl-equipo-cab{ display:flex; gap:12px; align-items:center; }
.dl-equipo-ic{ flex:none; width:52px; height:52px; border-radius:12px; display:grid; place-items:center; background:var(--card); border:1px solid var(--line2); }
.dl-equipo-ic .ic{ width:28px; height:28px; color:var(--accent); }
.dl-equipo-cab b{ display:block; font-size:17px; }
.dl-equipo-cab small{ display:block; color:var(--ink-soft); font-size:14px; line-height:1.35; }
.dl-equipo-nota{ text-align:center; color:var(--ink-soft); font-size:13px; line-height:1.4; }
@media (max-width:899px){
  body.dl-fijo #main{ overflow:hidden; padding-bottom:10px; }
  body.dl-fijo #fichaAviso:empty{ display:none; }
}

/* 14-oct, su pedido (teléfono): el Back baja a la barra de abajo. En Home el botón es Home; dentro de cualquier otra
   cosa se vuelve Back (body.pie-atras) y los Back de arriba ya no se ven. En la computadora no cambia nada. */
.tab-inicio .tab-atras{ display:none; }
body.pie-atras .tab-inicio .tab-casa{ display:none; }
body.pie-atras .tab-inicio .tab-atras{ display:inline; }
body.pie-atras .tab-inicio svg.tab-atras{ display:block; }
@media (max-width:899px){
  .pantalla > .volver[data-nav="atras"], .ptrabajo-main > .volver[data-nav="atras"]{ display:none !important; }
  #pTrabajo [data-atras-pie]{ display:none !important; }
  .pcuartos-cab{ padding-top:2px; }
  /* La cabecera del cliente sube (ya sin el Back) y se hace más chica: más pantalla para lo de abajo. */
  #pTrabajo .pcab{ grid-template-columns:62px minmax(0,1fr) auto; column-gap:10px; row-gap:1px; margin:0 0 8px; }
  #pTrabajo .pcab .portada{ width:62px; min-height:62px; border-radius:10px; }
  #pTrabajo .pcab-t{ font-size:17px; }
  #pTrabajo .pcab-dir{ font-size:12.5px; }
  #pTrabajo .pcab-meta{ font-size:11.5px; }
  #pTrabajo .pcab-etqs{ margin-top:2px; }
  #pTrabajo .pcab-etqs .etq-c{ font-size:11.5px; padding:2px 7px; }
  #pTrabajo .pcab-etqs .enlace-editar{ font-size:12.5px; }
  #pTrabajo .pcab .mas-cab{ width:34px; height:34px; }
}

/* Dry Log · equipo del cuarto (su diseño del 14-oct, 4 of 5): una fila por equipo con − y + azul. Nada verde. */
.dl-eq{ display:flex; flex-direction:column; gap:12px; padding:14px; }
.dl-eq-t{ margin:4px 0 0; font-size:22px; font-weight:800; letter-spacing:-.01em; }
.dl-eq-nota{ margin:-6px 0 0; font-size:13px; color:var(--ink-soft); }
.dl-eq-lista{ display:flex; flex-direction:column; gap:8px; }
.dl-eq-fila{ display:flex; align-items:center; gap:12px; min-height:58px; padding:8px 10px 8px 12px; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.dl-eq-fila.con{ border-color:var(--line2); }
.dl-eq-ic{ width:30px; height:30px; flex:none; color:var(--ink); stroke-width:1.6; }
.dl-eq-n{ flex:1; min-width:0; font-size:15.5px; font-weight:500; color:var(--ink); overflow-wrap:anywhere; }
.dl-eq-b{ flex:none; width:40px; height:40px; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer; padding:0; }
.dl-eq-b .ic{ width:20px; height:20px; stroke-width:2.4; }
.dl-eq-menos{ background:var(--bg2); color:var(--ink-soft); }
.dl-eq-menos:disabled{ opacity:.55; cursor:default; }
.dl-eq-mas{ background:var(--accent); color:#fff; box-shadow:0 2px 6px rgba(37,99,235,.3); }
.dl-eq-c{ flex:none; width:28px; text-align:center; font-size:18px; font-weight:600; font-variant-numeric:tabular-nums; }
.dl-eq-agregar{ width:100%; font:inherit; text-align:left; cursor:pointer; }
.dl-eq-agregar .dl-eq-ic{ color:var(--accent); }
.dl-eq-chev{ width:20px; height:20px; color:var(--ink); flex:none; }
.dl-eq-nuevo input{ flex:1; min-width:0; font:inherit; font-size:15px; padding:9px 10px; border:1px solid var(--line2); border-radius:10px; }
.dl-eq-nuevo .btn{ flex:none; }
.dl-eq-guardar{ min-height:52px; font-size:16.5px; }
.dl-eq .aviso:empty{ display:none; }
@media (max-width:899px){
  .dl-eq{ padding:12px 10px; }
  .dl-eq-fila{ gap:10px; padding:6px 8px 6px 10px; }
  .dl-eq-ic{ width:28px; height:28px; }
  .dl-eq-n{ font-size:15px; overflow-wrap:normal; word-break:normal; hyphens:none; }
  .dl-eq-b{ width:38px; height:38px; }
  .dl-eq-c{ width:24px; }
}
/* Su pedido (14-oct): "Equipment in …" más chico, en un solo renglón. */
@media (max-width:899px){ .dl-eq-t{ font-size:17px; font-weight:700; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } }
/* Su pedido (14-oct): la cabecera "Dry Logs · 4 of 5" y el título del equipo un poco más chicos. */
@media (max-width:899px){
  .dl-tel-cab h2{ font-size:18px; }
  .dl-prog i{ width:18px; height:3px; }
  .dl-prog-n{ font-size:12.5px; }
  .dl-eq-t{ font-size:15.5px; }
}
/* Su pedido (14-oct): "Equipment in …" en azul, para que llame la atención. */
.dl-eq-t{ color:var(--accent); }
/* Su pedido (14-oct): más espacio ENTRE LAS PALABRAS del título ("Equipment  in  Master Bedroom"), no arriba ni abajo. */
.dl-eq-t{ word-spacing:.3em; }

/* ===== Su diseño nuevo del equipo (14-oct): todo en una pantalla, letra ligera, "Room 1 of 4", "Equipment" con raya azul ===== */
.dl-prog-cuartos i{ width:26px; }
.dl-prog-cuartos.muchos i{ width:10px; }
.dl-eq{ gap:10px; }
.dl-eq .dl-caja{ min-height:46px; padding:6px 10px; }
.dl-eq .dl-caja-txt small{ font-size:11.5px; }
.dl-eq .dl-caja-txt b{ font-size:15px; font-weight:400; }
.dl-eq-t{ display:flex; align-items:center; gap:10px; margin:4px 0 0; font-size:21px; font-weight:700; color:var(--ink); word-spacing:normal; letter-spacing:-.01em; white-space:nowrap; }
.dl-eq-t::before{ content:""; width:4px; height:22px; border-radius:2px; background:var(--accent); flex:none; }
.dl-eq-lista{ gap:6px; }
.dl-eq-fila{ min-height:44px; padding:4px 8px 4px 10px; gap:12px; }
.dl-eq-ic{ width:30px; height:30px; color:var(--accent-dark); stroke-width:1.4; }
.dl-eq-n{ font-size:15px; font-weight:400; }
.dl-eq-b{ width:32px; height:32px; }
.dl-eq-b .ic{ width:17px; height:17px; }
.dl-eq-c{ font-size:16px; font-weight:400; width:26px; }
.dl-eq-guardar{ min-height:42px; font-size:15.5px; font-weight:500; }
@media (max-width:899px){
  .dl-eq{ padding:10px; }
  .dl-eq-t{ font-size:20px; margin:4px 0 0; }
  .dl-eq-fila{ gap:10px; padding:4px 6px 4px 8px; }
  .dl-eq-ic{ width:28px; height:28px; }
  .dl-eq-b{ width:32px; height:32px; }
  .dl-eq-c{ width:24px; }
}
/* Ajuste: que quepa todo (hasta Save) en la pantalla del teléfono y el cuarto se lea completo. */
.dl-prog-cuartos.medio i{ width:16px; }
@media (max-width:899px){
  .dl-tel:has(.dl-eq){ gap:8px; }
  .dl-eq{ gap:8px; padding:9px; }
  .dl-eq .dl-tel-sel{ gap:8px; }
  .dl-eq .dl-caja{ min-height:44px; padding:5px 8px; gap:7px; }
  .dl-eq .dl-caja .dl-caja-ic{ width:21px; height:21px; }
  .dl-eq .dl-caja .dl-caja-chev{ width:15px; height:15px; }
  .dl-eq .dl-caja-txt small{ font-size:11px; }
  .dl-eq .dl-caja-txt b{ font-size:13.5px; }
  .dl-eq-t{ font-size:19px; margin:2px 0 0; }
  .dl-eq-t::before{ height:20px; }
  .dl-eq-lista{ gap:5px; }
  .dl-eq-fila{ min-height:40px; padding:3px 6px 3px 8px; }
  .dl-eq-ic{ width:26px; height:26px; }
  .dl-eq-n{ font-size:14.5px; }
  .dl-eq-b{ width:30px; height:30px; }
  .dl-eq-guardar{ min-height:42px; }
}
/* Su pedido (14-oct): la letra como estaba antes (no tan ligera); el resto del diseño nuevo se queda. */
.dl-eq .dl-caja-txt b{ font-weight:600; }
.dl-eq-n{ font-weight:500; }
.dl-eq-c{ font-weight:600; }
.dl-eq-guardar{ font-weight:600; }
/* Su pedido (14-oct): las cajas Level / Room de todo el Dry Log del teléfono iguales a las del equipo. */
@media (max-width:899px){
  .dl-tel .dl-caja{ min-height:44px; padding:5px 8px; gap:7px; }
  .dl-tel .dl-caja .dl-caja-ic{ width:21px; height:21px; }
  .dl-tel .dl-caja .dl-caja-chev{ width:15px; height:15px; }
  .dl-tel .dl-caja-txt small{ font-size:11px; }
  .dl-tel .dl-caja-txt b{ font-size:13.5px; font-weight:600; }
  .dl-tel .dl-tel-sel{ gap:8px; }
}

/* ===== Dry Log · día 2 en adelante, varios puntos y el resumen del día (14-oct). Azul = baja (seca), ámbar = sube. ===== */
.dl-prog-btn{ display:flex; align-items:center; gap:8px; margin-left:auto; padding:4px 0; background:none; border:0; font:inherit; color:inherit; cursor:pointer; min-width:0; }
.dl-prog-btn .dl-prog{ flex:0 1 auto; min-width:0; overflow:hidden; }
.dl-tel-cab h2{ flex:none; }
.dl-antes{ display:flex; align-items:center; gap:8px; margin:0; padding:9px 12px; border-radius:10px; background:var(--bg2); color:var(--ink); font-size:13.5px; line-height:1.35; }
.dl-antes .ic{ width:18px; height:18px; flex:none; color:var(--accent); }
.dl-antes small{ color:var(--ink-soft); font-size:12px; }
.dl-antes.listo{ background:var(--accent-soft); color:var(--accent); font-weight:600; }
.dl-antes[hidden]{ display:none !important; }
.dl-saltar{ position:absolute; top:10px; right:10px; z-index:2; display:inline-flex; align-items:center; gap:2px; padding:6px 8px 6px 12px; border:0; border-radius:99px; background:rgba(15,26,46,.55); color:#fff; font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.dl-saltar .ic{ width:16px; height:16px; }
.dl-compara{ display:block; margin-top:4px; font-size:13px; font-weight:600; color:var(--ink-soft); }
.dl-compara[hidden]{ display:none !important; }
.dl-compara.baja, .dl-tend.baja{ color:var(--accent); }
.dl-compara.sube, .dl-tend.sube{ color:#b7791f; }
.dl-tend{ font-style:normal; font-weight:700; }
.dl-otro{ display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; border:1px dashed var(--line2); border-radius:12px; background:var(--card); font:inherit; color:var(--ink); text-align:left; cursor:pointer; }
.dl-otro > .ic{ width:22px; height:22px; flex:none; color:var(--accent); }
.dl-otro > .ic:last-child{ width:18px; height:18px; color:var(--ink-soft); margin-left:auto; }
.dl-otro span{ display:flex; flex-direction:column; font-size:14.5px; font-weight:600; }
.dl-otro small{ font-size:12px; font-weight:500; color:var(--ink-soft); }
.dl-otro-pend{ border-style:solid; border-color:var(--accent); background:var(--accent-soft); }
.dl-dia{ display:flex; flex-direction:column; gap:10px; padding:12px; }
.dl-dia-res{ margin:0; font-size:13.5px; color:var(--ink-soft); font-weight:600; }
.dl-dia-c{ border:1px solid var(--line); border-radius:12px; padding:8px 10px; display:flex; flex-direction:column; gap:6px; }
.dl-dia-c.falta{ border-color:#f2d58a; background:#fffaf0; }
.dl-dia-cab{ display:flex; align-items:center; gap:10px; width:100%; padding:2px 0; background:none; border:0; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.dl-dia-cab span{ display:flex; flex-direction:column; min-width:0; }
.dl-dia-cab b{ font-size:15px; }
.dl-dia-cab small{ font-size:12px; color:var(--ink-soft); }
.dl-dia-ic{ width:24px; height:24px; flex:none; color:var(--ink); }
.dl-dia-chev{ width:18px; height:18px; margin-left:auto; color:var(--ink-soft); flex:none; }
.dl-dia-l{ display:flex; align-items:center; gap:8px; font-size:14px; padding:4px 0 4px 34px; border-top:1px solid var(--line); }
.dl-dia-p{ flex:1; min-width:0; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-dia-l b{ font-size:15px; font-variant-numeric:tabular-nums; }
.dl-dia-l em{ font-size:12.5px; }
.dl-dia-x{ flex:none; width:28px; height:28px; border:0; border-radius:50%; background:var(--bg2); color:var(--ink-soft); font-size:12px; cursor:pointer; }
.dl-dia-falta{ margin:0; padding-left:34px; font-size:13.5px; font-weight:600; color:#b7791f; }
.dl-dia-eq{ display:flex; align-items:center; gap:8px; margin:0; padding-left:34px; font-size:13px; color:var(--ink-soft); }
.dl-dia-eq .ic{ width:16px; height:16px; flex:none; }
.dl-dia-eq small{ font-size:12px; }

/* ===== Documents (14-oct): los reportes del secado (Dry Log y Equipment) con su PDF. Azul = baja, ámbar = sube. ===== */
.docs{ display:flex; flex-direction:column; gap:10px; padding:16px; }
.docs .sec-t{ margin:0; }
.doc-nota{ margin:0 0 4px; font-size:13.5px; color:var(--ink-soft); }
.doc-fila{ display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.doc-ic{ flex:none; width:44px; height:44px; border-radius:10px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.doc-ic .ic{ width:24px; height:24px; }
.doc-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.doc-txt b{ font-size:15.5px; }
.doc-txt small{ font-size:12.5px; color:var(--ink-soft); }
.doc-acc{ display:flex; gap:8px; flex:none; }
.doc-acc .btn .ic{ width:16px; height:16px; }
@media (max-width:899px){ .doc-fila{ flex-wrap:wrap; } .doc-acc{ width:100%; } .doc-acc .btn{ flex:1; } }
.doc-vista{ display:flex; flex-direction:column; gap:12px; }
/* Documents (15 oct): Photo Report, Floor Plan y "Send documents" (todo en un PDF o uno por documento). */
.doc-enviar{ margin-top:6px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--bg2); display:flex; flex-direction:column; gap:10px; }
.doc-enviar h3{ margin:0; font-size:16px; font-weight:700; }
.doc-enviar .doc-nota{ margin:0; }
.doc-checks{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px; }
.doc-check{ display:flex; align-items:center; gap:10px; min-height:52px; padding:8px 12px; border:1px solid var(--line2); border-radius:10px; background:var(--card); cursor:pointer; }
.doc-check input{ width:20px; height:20px; flex:none; accent-color:var(--accent); }
.doc-check span{ display:flex; flex-direction:column; min-width:0; }
.doc-check b{ font-size:14.5px; }
.doc-check small{ font-size:12.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-check.off{ opacity:.5; cursor:default; }
.doc-enviar-acc{ display:flex; gap:10px; flex-wrap:wrap; }
.doc-enviar-acc .btn{ flex:1 1 180px; }
.doc-enviar-acc .btn .ic{ width:16px; height:16px; }
.doc-listos{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:10px; background:var(--accent-soft); font-weight:600; }
.doc-listos .btn .ic{ width:16px; height:16px; }
.doc-fotos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(128px, 1fr)); gap:12px; }
.doc-fotos figure{ margin:0; display:flex; flex-direction:column; gap:5px; }
.doc-fotos img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; background:var(--bg2); display:block; }
.doc-fotos figcaption{ font-size:12px; color:var(--ink-soft); line-height:1.35; }
.doc-fotos figcaption b{ color:var(--ink); }
.doc-fotos figcaption small{ display:block; font-size:11.5px; color:var(--ink); }
.doc-plano{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }
.doc-plano svg{ display:block; width:100%; height:auto; }
.doc-vista-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.doc-vista-cab .volver{ padding:4px 0; }
.doc-vista-cab .btn .ic{ width:16px; height:16px; }
@media (max-width:899px){ .doc-vista-cab{ justify-content:flex-end; } }
.doc-hoja{ background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:18px; box-shadow:var(--sombra); }
.doc-enc{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-bottom:8px; border-bottom:2px solid var(--accent); }
.doc-marca{ font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.doc-marca span{ color:var(--accent); }
.doc-titulo{ font-size:15px; font-weight:700; text-align:right; }
.doc-datos{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin:12px 0 4px; }
.doc-datos small{ display:block; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); }
.doc-datos b{ font-size:13.5px; overflow-wrap:anywhere; }
@media (max-width:899px){ .doc-datos{ grid-template-columns:repeat(2, minmax(0,1fr)); } .doc-hoja{ padding:12px; } }
.doc-sub{ font-size:12.5px; color:var(--ink-soft); margin:10px 0; }
.doc-sub .baja, .doc-tabla .baja{ color:var(--accent); font-weight:700; }
.doc-sub .sube, .doc-tabla .sube{ color:#b7791f; font-weight:700; }
.doc-sala{ margin:16px 0 6px; font-size:15px; font-weight:700; }
.doc-sala small{ font-weight:500; color:var(--ink-soft); font-size:13px; }
.doc-tabla{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.doc-tabla table{ border-collapse:collapse; width:100%; font-size:13px; }
.doc-tabla th{ background:#eef3fb; text-align:right; font-weight:700; padding:6px 8px; white-space:nowrap; }
.doc-tabla th:first-child, .doc-tabla td:first-child{ text-align:left; }
.doc-tabla th small{ display:block; font-weight:500; color:var(--ink-soft); font-size:11px; }
.doc-tabla td{ padding:6px 8px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.doc-tabla td:first-child{ white-space:normal; min-width:140px; }
.doc-tabla td small{ margin-left:4px; font-size:11px; }
.doc-tabla td.nada, .doc-tabla td.sigue{ color:var(--ink-mute); }
.doc-tabla tr.total td{ border-bottom:0; font-weight:700; }
.aviso.ok{ color:var(--accent); }

/* Dry Log en la computadora: pasos 2 (la lectura) y 3 (el equipo), con el mismo estilo de los pasos de su diseño. */
.dl-web .dl-tel-aviso, .dl-paso .dl-tel-aviso{ margin:0 0 4px; }
.dl-web-forma{ display:grid; grid-template-columns:1.1fr 1.4fr .8fr 1.4fr; gap:12px; align-items:end; margin-top:6px; }
.dl-web-n{ display:flex; align-items:center; gap:6px; }
.dl-web-n input{ width:100%; font-weight:700; font-size:18px; }
.dl-web-n span{ font-weight:700; color:var(--ink-soft); }
.dl-web-foto input{ padding:9px 8px; font-size:13px; height:auto; }
.dl-web-foto i{ font-style:normal; font-weight:500; color:var(--ink-mute); }
.dl-web .dl-compara{ margin-top:2px; }
.dl-web-hoy{ display:flex; flex-direction:column; gap:2px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; }
.dl-web-hoy small{ font-size:12px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.dl-web-hoy .dl-dia-l{ padding-left:0; }
.dl-web-hoy .dl-dia-l:first-of-type{ border-top:0; }
.dl-pie-der{ display:flex; gap:10px; margin-left:auto; }
.dl-web-eq{ max-width:640px; }
.dl-leido-hoy{ display:inline-flex; align-items:center; gap:4px; color:var(--accent); font-weight:600; }
.dl-leido-hoy .ic{ width:14px; height:14px; }
@media (max-width:1100px){ .dl-web-forma{ grid-template-columns:1fr 1fr; } }

/* Documents · Dry Log con SU estilo ("Daily Drying Log", 14-oct): título grande, datos del trabajo, gráfica, tablas por nivel. */
.dlr-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-bottom:8px; border-bottom:1px solid var(--line2); }
.dlr-etq{ font-size:14px; font-weight:700; color:var(--ink-soft); }
.dlr-t{ margin:14px 0 8px; font-size:28px; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.dlr-info{ display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; font-size:13.5px; margin-bottom:12px; }
.dlr-info div{ display:flex; gap:8px; min-width:0; }
.dlr-info b{ flex:none; width:88px; }
.dlr-info span{ min-width:0; overflow-wrap:anywhere; }
.dlr-graf{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:12px; }
.dlr-graf h3{ margin:0 0 4px; font-size:15px; }
.dlr-svg{ display:block; width:100%; height:auto; }
.dlr-nivel{ margin:14px 0 0; padding:7px 10px; border-radius:6px 6px 0 0; background:#e8f0ff; color:var(--accent); font-weight:800; font-size:15px; }
.dlr-tabla th{ text-align:left; }
.dlr-tabla th.n, .dlr-tabla td.n{ text-align:center; }
.dlr-tabla td{ text-align:left; }
.dlr-foto{ width:52px; }
.dlr-foto img, .dlr-sinfoto{ display:block; width:40px; height:28px; object-fit:cover; border-radius:3px; background:var(--bg2); }
.dlr-foto small{ display:block; font-size:9.5px; color:var(--ink-soft); }
.dlr-pie{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px; padding-top:10px; border-top:1px solid var(--line2); font-size:13px; }
.dlr-pie > div + div{ border-left:1px solid var(--line2); padding-left:16px; }
.dlr-pie p{ margin:4px 0 0; color:var(--ink); }
.dlr-nota{ font-size:11.5px; color:var(--ink-soft); margin:12px 0 0; }
@media (max-width:899px){ .dlr-t{ font-size:22px; } .dlr-info{ grid-template-columns:1fr; } .dlr-pie{ grid-template-columns:1fr; } .dlr-pie > div + div{ border-left:0; padding-left:0; } }

/* Dry Log · la lectura con SU diseño (14-oct): "Scan <cuarto>", la foto, "Reading detected" con el número grande. */
.dl-lec{ display:flex; flex-direction:column; gap:10px; padding:12px; }
.dl-lec-t{ margin:6px 0 0; font-size:24px; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.dl-lec-sub{ margin:-4px 0 2px; font-size:14px; color:var(--ink-soft); }
.dl-lec .dl-visor-foto{ border-radius:12px; background:#000; }
.dl-lec .dl-visor-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.dl-det{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; background:#ecf8f0; }
.dl-det-ic{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#22a35a; color:#fff; font-weight:800; font-size:18px; }
.dl-det-ic .ic{ width:20px; height:20px; stroke-width:3; }
.dl-det-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.dl-det-txt b{ font-size:16px; color:#15803d; }
.dl-det-sub{ font-size:12.5px; color:var(--ink-soft); line-height:1.3; }
.dl-det .dl-compara{ margin:0; font-size:12.5px; }
.dl-det .dl-compara:not([hidden]) + .dl-det-sub{ display:none; }
.dl-det-n{ flex:none; display:flex; align-items:baseline; padding-left:14px; border-left:1px solid #cfe9d8; }
.dl-det-n input{ font-size:34px; font-weight:800; color:var(--ink); border:0; background:transparent; padding:0; width:2.4ch; text-align:right; font-variant-numeric:tabular-nums; }
.dl-det-n span{ font-size:30px; font-weight:800; color:var(--ink); }
.dl-det.sin{ background:#fff6e5; }
.dl-det.sin .dl-det-ic{ background:#d97706; }
.dl-det.sin .dl-det-txt b{ color:#b45309; }
.dl-det.sin .dl-det-n{ border-left-color:#f3d9a8; }
.dl-det.sin .dl-det-n input{ border-bottom:2px solid #d97706; }
.dl-punto{ display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--card); font:inherit; font-size:14px; color:var(--ink); text-align:left; cursor:pointer; }
.dl-punto > .ic{ width:18px; height:18px; color:var(--accent); flex:none; }
.dl-punto span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-punto b{ display:inline-flex; align-items:center; gap:4px; color:var(--accent); font-size:13px; }
.dl-punto b .ic{ width:14px; height:14px; }
.dl-lec .dl-botones .btn .ic{ width:18px; height:18px; }
.dl-lec .dl-mat{ grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); }
.dl-lec .dl-mini select, .dl-lec .dl-mini input{ width:100%; min-width:0; }
.dl-lec .aviso:empty{ display:none; }
.dl-det-txt b{ white-space:nowrap; font-size:15.5px; }
.dl-det-sub{ font-size:12px; }
.dl-det-n input{ font-size:30px; }
.dl-det-n span{ font-size:26px; }
/* Su pedido (14-oct): con la cabecera del cliente a la vista, la lectura se compacta para caber. */
@media (max-width:899px){
  .dl-lec{ gap:8px; padding:10px; }
  .dl-lec-t{ font-size:20px; margin-top:2px; }
  .dl-lec-sub{ font-size:13px; margin:-4px 0 0; }
  .dl-det{ padding:9px 12px; }
  .dl-lec .dl-mini select, .dl-lec .dl-mini input{ height:40px; }
  .dl-lec .dl-botones .btn{ min-height:44px; }
}
/* Equipo justo después de guardar la lectura (su pedido del 14-oct): una línea con lo guardado y "otro punto". */
.dl-eq-ok{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; background:var(--accent-soft); color:var(--ink); font-size:13.5px; }
.dl-eq-ok > .ic{ width:18px; height:18px; flex:none; color:var(--accent); stroke-width:3; }
.dl-eq-ok span{ min-width:0; }
.dl-eq .dl-otro{ padding:8px 10px; }
.dl-eq .dl-otro span{ font-size:13.5px; }
.dl-eq-ok span{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-eq-otro{ flex:none; padding:6px 10px; border:1px solid var(--accent); border-radius:99px; background:var(--card); color:var(--accent); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.dl-eq-otro.pend{ background:var(--accent); color:#fff; }

/* Lectura (14-oct, su pedido): "Retake" pasa a una pastilla sobre la foto; abajo solo "+ Add another reading" y "Continue". */
.dl-lec .dl-visor-foto{ position:relative; }
.dl-lec .dl-retomar{ position:absolute; right:10px; bottom:10px; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:0; border-radius:999px; background:rgba(0,0,0,.6); color:#fff; font:inherit; font-size:13px; font-weight:600; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.dl-lec .dl-retomar .ic{ width:16px; height:16px; }
.dl-lec .dl-lec-acc{ display:flex; flex-direction:column; gap:10px; }
.dl-lec .dl-lec-acc .aviso:empty{ display:none; }
.dl-lec .dl-lec-acc .dl-botones .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; font-size:15px; }
.dl-lec .dl-lec-acc .dl-botones .btn .ic{ width:18px; height:18px; flex:none; }

/* Invitar por enlace (14-oct, su pedido): en Personas el manager crea el enlace; en Crear cuenta se dice quién invita. */
.invitar-sub{ margin:-4px 0 10px; font-size:14px; color:var(--ink-soft); line-height:1.4; }
.invitar-fila{ display:flex; gap:8px; }
.invitar-fila input{ flex:1; min-width:0; }
.invitar-fila .btn{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; flex:none; }
.invitar-fila .btn .ic, .invitar-botones .btn .ic{ width:18px; height:18px; }
.invitar-hecho{ margin-top:12px; padding:12px; border-radius:12px; background:color-mix(in srgb, var(--accent) 8%, transparent); border:1px solid color-mix(in srgb, var(--accent) 25%, transparent); display:flex; flex-direction:column; gap:10px; }
.invitar-hecho[hidden]{ display:none; }
.invitar-hecho-t{ margin:0; font-weight:600; font-size:14px; }
.invitar-enlace input{ width:100%; font-size:13px; }
.invitar-botones{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.invitar-botones .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; }
#listaInvitaciones:not(:empty){ margin-top:12px; }
.estado-chip.inv-valida{ background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); }
.estado-chip.inv-usada{ background:color-mix(in srgb, #1e9e4a 14%, transparent); color:#1e9e4a; }
.estado-chip.inv-vencida, .estado-chip.inv-anulada{ opacity:.7; }
.invitacion-aviso{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; margin-bottom:12px; border-radius:12px; background:color-mix(in srgb, var(--accent) 10%, transparent); color:var(--ink, inherit); font-size:14px; line-height:1.4; text-align:left; }
.invitacion-aviso[hidden]{ display:none; }
.invitacion-aviso .ic{ width:20px; height:20px; color:var(--accent); flex:none; margin-top:1px; }
#crCodigoCampo[hidden]{ display:none; }
/* Empresas nuevas (solo el dueño de Scanova360) y los campos de "Registre su empresa". */
#bloqueEmpresas[hidden], #crEmpresaCampo[hidden], #gcEmpresaCampo[hidden], #gcCodigoCampo[hidden]{ display:none; }
.invitar-fila + .invitar-fila{ margin-top:8px; }
#empAviso:empty{ display:none; }
.invitar-fila input{ min-height:44px; }
/* "New photos go to" es un botón (14-oct): se ve igual que antes, con "Change" en azul para que se note que se toca. */
button.pdestino{ border:0; background:none; padding:0; font:inherit; cursor:pointer; text-align:left; }
button.pdestino > .ic:nth-of-type(2){ width:13px; height:13px; color:var(--ink-mute); margin-left:-2px; }
.pdestino-cambiar{ color:var(--accent); font-weight:600; margin-left:4px; }
button.pdestino:hover .pdestino-cambiar{ text-decoration:underline; }

/* Dry Logs · EL REGISTRO (14-oct): todos los días, cuarto por cuarto */
.dl-reg-cabeza{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.dl-reg-acc{ display:flex; gap:10px; flex-wrap:wrap; }
.dl-reg-acc .btn{ width:auto; display:inline-flex; align-items:center; gap:6px; }
.dl-reg-acc .ic{ width:17px; height:17px; }
.dl-reg-nivel{ margin-top:18px; }
.dl-reg-cuarto{ border:1px solid var(--line); border-radius:12px; padding:12px 14px 6px; margin:10px 0; background:var(--surface, #fff); }
.dl-reg-cu-cab{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.dl-reg-cu-cab b{ font-size:16px; }
.dl-reg-cu-cab small{ margin-left:auto; font-size:13px; }
.dl-reg-cu-cab .dl-op-ic{ width:22px; height:22px; color:var(--accent); }
.dl-reg-falta{ color:#b7791f; font-weight:600; }
.dl-reg-tabla-w{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.dl-reg-tabla{ width:100%; min-width:520px; table-layout:fixed; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums; }
.dl-reg-tabla th:first-child{ width:34%; }
.dl-reg-tabla th{ text-align:left; font-weight:600; color:var(--ink-soft); font-size:12.5px; padding:6px 10px 6px 0; border-bottom:1px solid var(--line); white-space:nowrap; }
.dl-reg-tabla th small{ display:block; font-weight:500; color:var(--ink-mute); }
.dl-reg-tabla td{ padding:7px 10px 7px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.dl-reg-tabla tr:last-child td{ border-bottom:0; }
.dl-reg-p{ color:var(--ink-soft); }
.dl-reg-v{ white-space:nowrap; }
.dl-reg-v b{ font-size:15px; }
.dl-reg-v em{ display:block; font-size:12px; }
.dl-reg-v.nada{ color:var(--ink-mute); }
.dl-reg-eq td{ font-size:13px; color:var(--ink-soft); }
.dl-reg-eq .dl-reg-p{ display:flex; align-items:center; gap:6px; }
.dl-reg-eq .ic{ width:15px; height:15px; }
.dl-reg-sin{ color:var(--ink-mute); font-size:13.5px; margin:6px 0 0; }
.dl-ver-todo{ display:block; margin:12px auto 0; }
/* Registro en el teléfono: cada punto en su renglón y sus días uno al lado del otro (sin deslizar de lado) */
@media (max-width:640px){
  .dl-reg-tabla{ min-width:0; table-layout:auto; }
  .dl-reg-tabla thead{ display:none; }
  .dl-reg-tabla, .dl-reg-tabla tbody, .dl-reg-tabla tr{ display:block; width:100%; }
  .dl-reg-tabla tr{ display:flex; flex-wrap:wrap; gap:4px 14px; padding:8px 0; border-bottom:1px solid var(--line); }
  .dl-reg-tabla tr:last-child{ border-bottom:0; }
  .dl-reg-tabla td{ display:block; border:0; padding:0; }
  .dl-reg-tabla td.dl-reg-p{ flex:0 0 100%; color:var(--ink); font-weight:600; font-size:14px; }
  .dl-reg-tabla td[data-d]::before{ content:attr(data-d); display:block; font-size:11.5px; font-weight:500; color:var(--ink-mute); }
  .dl-reg-eq td[data-d]{ flex:1 1 30%; min-width:90px; font-size:12.5px; }
}
/* Dry Logs en el teléfono (su captura del 14-oct): Material a lo ancho arriba de "Take next reading" / "Continue" */
.dl-mat-sel{ display:flex; flex-direction:column; gap:6px; margin:4px 0 12px; }
.dl-mat-sel small{ color:var(--ink-soft); font-size:15px; }
.dl-mat-sel select{ height:52px; font:inherit; font-size:18px; color:var(--ink); background:var(--card); border:1px solid var(--line2); border-radius:12px; padding:0 14px; }
.dl-punto-txt{ display:flex; align-items:center; gap:6px; margin:-4px 0 10px; color:var(--ink-soft); font-size:13.5px; }
.dl-punto-txt .ic{ width:15px; height:15px; color:var(--accent); flex:0 0 auto; }
.dl-botones .btn .ic{ width:20px; height:20px; }
.dl-lec-acc [data-dl-siguiente]{ background:var(--surface-2, #f1f3f7); }

/* Lectura en el teléfono cuando el espacio no alcanza (su pedido del 14-oct: la pantalla no se mueve) */
.dl-lec.apretado .dl-lec-sub{ display:none; }
.dl-lec.apretado{ gap:6px; padding-top:8px; padding-bottom:8px; }
.dl-lec.apretado .dl-lec-t{ font-size:19px; margin:0; }
.dl-lec.muy-apretado .dl-mat-sel{ flex-direction:row; align-items:center; gap:10px; margin:0; }
.dl-lec.muy-apretado .dl-mat-sel small{ flex:none; }
.dl-lec.muy-apretado .dl-mat-sel select{ flex:1; min-width:0; height:44px; font-size:17px; }
.dl-lec.muy-apretado .dl-det{ padding:6px 12px; }
.dl-lec.muy-apretado .dl-det-sub{ display:none; }
/* Su pedido (14-oct): con la cámara o la lectura en pantalla no queda hueco arriba de la barra de abajo */
@media (max-width:899px){
  body.dl-fijo #main{ padding-bottom:4px; }
  body.dl-fijo #panel-secado .dl-tel > .card:last-child{ margin-bottom:0; }
}
/* Escribiendo el número de la lectura (su pedido del 14-oct): solo la foto y la caja del número arriba del teclado */
body.dl-escribiendo #pie{ display:none !important; }
body.dl-escribiendo #panel-secado .dl-lec-acc{ display:none; }
body.dl-escribiendo #panel-secado .dl-lec-sub{ display:none; }
/* Su pedido (14-oct): "Dry Logs" más chico y todo un poco más arriba, para que la foto/cámara quede más grande */
@media (max-width:899px){
  #panel-secado .dl-tel-cab h2{ font-size:15px; line-height:1.2; }
  #panel-secado .dl-tel{ gap:8px; }
  body.dl-fijo #fichaTabs{ margin-bottom:8px; }
}
body.dl-escribiendo #panel-secado .dl-lec-t{ display:none; }
/* Su pedido (14-oct): sin la palabra "Material", la barra a todo lo ancho */
.dl-mat-sel select, .dl-lec.muy-apretado .dl-mat-sel select{ width:100%; flex:1; }
/* La barra de Material que se abre en su lugar (su pedido del 14-oct): tres opciones a la vista, se desliza */
.dl-det[hidden]{ display:none !important; }
.dl-mat-sel{ position:relative; }
.dl-mat-bar{ width:100%; height:52px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 14px; font:inherit; font-size:18px; color:var(--ink); background:var(--card); border:1px solid var(--line2); border-radius:12px; cursor:pointer; text-align:left; }
.dl-mat-bar .ic{ width:18px; height:18px; color:var(--ink-soft); flex:none; }
.dl-mat-val.vacia{ color:var(--ink-mute); }
.dl-mat-lista{ position:absolute; left:0; right:0; bottom:calc(100% + 6px); height:156px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scroll-snap-type:y mandatory; background:var(--card); border:1px solid var(--line2); border-radius:14px; box-shadow:0 12px 32px rgba(15,23,42,.22); z-index:30; }
.dl-mat-lista[hidden]{ display:none !important; }
.dl-mat-op{ display:flex; align-items:center; justify-content:space-between; width:100%; height:52px; padding:0 16px; scroll-snap-align:start; border:0; border-bottom:1px solid var(--line); background:none; font:inherit; font-size:17px; color:var(--ink); text-align:left; cursor:pointer; }
.dl-mat-op:last-child{ border-bottom:0; }
.dl-mat-op .ic{ width:18px; height:18px; color:var(--accent); visibility:hidden; }
.dl-mat-op.on{ color:var(--accent); font-weight:600; }
.dl-mat-op.on .ic{ visibility:visible; }
.dl-lec.muy-apretado .dl-mat-bar{ height:46px; font-size:17px; }
.dl-lec .dl-mat-sel{ margin:0; }
/* Paso 4 (su imagen del 14-oct): "Material", la rueda con tres a la vista (el del centro resaltado) y el botón OK */
.dl-lec.eligiendo .dl-det{ display:none !important; }
.dl-rueda-t{ margin:0; font-size:14px; color:var(--ink-soft); }
.dl-rueda{ position:relative; height:132px; border:1px solid var(--line2); border-radius:16px; background:var(--card); overflow:hidden; }
.dl-rueda-marca{ position:absolute; left:16px; right:16px; top:50%; height:44px; transform:translateY(-50%); border-radius:12px; background:color-mix(in srgb, var(--accent) 9%, #fff); border:1px solid color-mix(in srgb, var(--accent) 22%, #fff); box-shadow:0 2px 8px rgba(37,99,235,.10); pointer-events:none; }
.dl-rueda-lista{ position:relative; height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scroll-snap-type:y mandatory; padding:44px 0; box-sizing:border-box; scrollbar-width:none; -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.35), #000 35%, #000 65%, rgba(0,0,0,.35)); mask-image:linear-gradient(to bottom, rgba(0,0,0,.35), #000 35%, #000 65%, rgba(0,0,0,.35)); }
.dl-rueda-lista::-webkit-scrollbar{ display:none; }
.dl-rueda-op{ display:block; width:100%; height:44px; padding:0 16px; border:0; background:none; font:inherit; font-size:18px; color:var(--ink-mute); text-align:center; scroll-snap-align:center; cursor:pointer; transition:color .12s; }
.dl-rueda-op.on{ color:var(--ink); font-weight:700; font-size:19px; }
.dl-rueda-ok{ width:100%; min-height:50px; font-size:18px; }
/* Su pedido (14-oct): la rueda de materiales con look de cristal (estilo Apple, como su diseño) */
.dl-rueda{
  border:1px solid rgba(255,255,255,.85);
  background:
    radial-gradient(55% 130% at 0% 50%, rgba(129,166,255,.30), transparent 62%),
    radial-gradient(55% 130% at 100% 50%, rgba(129,166,255,.30), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(234,240,252,.62));
  -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(15,23,42,.05), 0 0 0 1px rgba(148,170,215,.28), 0 10px 26px rgba(37,99,235,.10);
}
.dl-rueda-marca{
  left:14px; right:14px; height:46px;
  background:linear-gradient(180deg, rgba(255,255,255,.80), rgba(219,231,255,.62));
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(129,166,255,.30), 0 6px 18px rgba(59,130,246,.16), inset 0 1px 0 #fff, inset 0 -6px 12px rgba(129,166,255,.12);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.dl-rueda-op{ color:rgba(15,23,42,.36); }
.dl-rueda-op.on{ color:#0f172a; }
.dl-rueda-t{ color:rgba(15,23,42,.55); }

/* ===== Su diseño (14-oct): al tocar Continue — la lectura guardada en verde y el equipo del cuarto ===== */
#panel-secado .dl-escan h3{ margin:2px 0 2px; font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
#panel-secado .dl-escan p{ margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.4; }
#panel-secado .dl-tel > .card.dl-leida{ margin:0; padding:7px; border:1px solid var(--line); border-radius:16px; }
.dl-leida-c{ display:flex; align-items:center; gap:12px; padding:10px 10px 10px 12px; border-radius:11px; background:#eef8f1; }
.dl-leida-ok{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#1f9a3c; color:#fff; }
.dl-leida-ok .ic{ width:20px; height:20px; stroke-width:3; }
.dl-leida-n{ flex:none; font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.dl-leida-txt{ flex:1; min-width:0; display:flex; flex-direction:column; padding-left:12px; border-left:1px solid var(--line2); color:var(--ink-soft); font-size:13.5px; line-height:1.3; }
.dl-leida-c img{ flex:none; width:80px; height:68px; object-fit:cover; border-radius:9px; background:#000; }
#panel-secado .dl-tel > .card.dl-eq0{ display:flex; flex-direction:column; gap:10px; margin:0; padding:14px 13px; border:1px solid var(--line); border-radius:16px; }
.dl-eq0 h3{ margin:0; font-size:18px; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.dl-eq0 > p{ margin:-6px 0 2px; color:var(--ink-soft); font-size:14.5px; line-height:1.4; }
.dl-eq0 .btn{ min-height:46px; font-size:16px; gap:12px; border-radius:9px; }
.dl-eq0 .btn .ic{ width:22px; height:22px; }
.dl-eq0 .btn.btn-outline{ color:var(--accent); border:1.5px solid var(--accent); background:var(--card); }
.dl-eq0 small{ color:var(--ink-soft); font-size:12.5px; line-height:1.45; }
.dl-eq0 .aviso:empty{ display:none; }

/* ===== Su diseño (14-oct): "Equipment in …" — la lista del equipo sube y baja con su barrita a la derecha; Save abajo ===== */
#panel-secado .dl-tel > .card.dl-eq2{ position:relative; display:flex; flex-direction:column; gap:7px; margin:0; padding:11px 16px 10px 10px; border:1px solid var(--line); border-radius:14px; }
.dl-eq2 .dl-eq2-t{ margin:0 2px 2px; font-size:18px; font-weight:800; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-eq2 .dl-eq-rueda{ display:flex; flex-direction:column; gap:5px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scroll-snap-type:y proximity; scrollbar-width:none; }
.dl-eq2 .dl-eq-rueda::-webkit-scrollbar{ display:none; }
.dl-eq2 .dl-eq-barra{ position:absolute; right:5px; width:4px; border-radius:2px; background:#e6eaf1; pointer-events:none; }
.dl-eq2 .dl-eq-barra[hidden]{ display:none !important; }
.dl-eq2 .dl-eq-barra i{ display:block; width:4px; border-radius:2px; background:#a9b2c2; }
.dl-eq2 .dl-eq-fila{ flex:none; min-height:46px; gap:6px; padding:5px 7px 5px 7px; border:1px solid var(--line); border-radius:10px; background:var(--card); scroll-snap-align:start; box-sizing:border-box; }
.dl-eq2 .dl-eq-ic{ width:34px; height:34px; color:var(--ink); stroke-width:1.4; }
.dl-eq2 .dl-eq-n{ margin-left:4px; font-size:15px; font-weight:500; color:var(--ink); line-height:1.2; }
.dl-eq2 .dl-eq-b{ width:37px; height:34px; border-radius:7px; }
.dl-eq2 .dl-eq-b .ic{ width:19px; height:19px; stroke-width:2.4; }
.dl-eq2 .dl-eq-menos{ background:#eef1f8; color:var(--ink-soft); }
.dl-eq2 .dl-eq-menos:disabled{ opacity:1; color:var(--ink-mute); }
.dl-eq2 .dl-eq-mas{ background:var(--accent); color:#fff; box-shadow:none; }
.dl-eq2 .dl-eq-c{ width:42px; height:34px; display:grid; place-items:center; border:1px solid var(--line2); border-radius:7px; background:var(--card); font-size:17px; font-weight:600; }
.dl-eq2 .dl-eq-agregar{ min-height:40px; padding-top:3px; padding-bottom:3px; }
.dl-eq2 .dl-eq-agregar .dl-eq-ic{ color:var(--accent); width:30px; height:30px; stroke-width:1.6; }
.dl-eq2 .dl-eq-agregar .dl-eq-n{ color:var(--accent); font-size:15px; }
.dl-eq2 .dl-eq-agregar .dl-eq-chev{ color:var(--ink-mute); }
.dl-eq2 .dl-eq-nuevo{ min-height:46px; }
.dl-eq2 .dl-eq-nuevo .dl-eq-ic{ width:26px; height:26px; }
.dl-eq2 .aviso:empty{ display:none; }
#panel-secado .dl-eq2-guardar{ position:relative; width:100%; min-height:44px; font-size:16px; font-weight:500; border-radius:9px; }
#panel-secado .dl-eq2-guardar .ic{ position:absolute; right:16px; top:50%; transform:translateY(-50%); width:22px; height:22px; }
/* Teléfono más chico que el suyo: la pantalla de Continue se aprieta para quedar quieta (sin deslizar) */
#panel-secado .dl-listo2.apretado .dl-escan p{ display:none; }
#panel-secado .dl-listo2.apretado .dl-escan h3{ margin:0; font-size:18px; }
#panel-secado .dl-listo2.apretado > .card.dl-leida{ padding:5px; }
.dl-listo2.apretado .dl-leida-c{ padding:7px 8px 7px 10px; }
.dl-listo2.apretado .dl-leida-c img{ width:66px; height:56px; }
.dl-listo2.apretado .dl-leida-n{ font-size:24px; }
#panel-secado .dl-listo2.apretado > .card.dl-eq0{ gap:8px; padding:12px; }
.dl-listo2.apretado .dl-eq0 .btn{ min-height:44px; }
#panel-secado .dl-listo2.muy-apretado .dl-escan{ display:none; }
.dl-listo2.muy-apretado .dl-eq0 > p{ display:none; }
/* Tocar + rápido (2, 3 fans) no hace zoom: dentro de la rueda (que se desliza sola) también vale "manipulation" */
.dl-tel, .dl-tel *{ touch-action:manipulation; }
/* Su diseño: "HEPA Air Scrubber" en un renglón también en un teléfono más angosto que el suyo */
@media (max-width:420px){ .dl-eq2 .dl-eq-n{ font-size:14.5px; letter-spacing:-.01em; } .dl-eq2 .dl-eq-ic{ width:32px; height:32px; } }

/* ===== Su diseño D (14-oct): dentro del Dry Log del teléfono la barra de abajo trae las acciones de cada paso ===== */
.pie .dl-tab{ display:none; }
body.dl-barra .pie .dl-tab{ display:flex; }
body.dl-barra .pie [data-nav="proyectos"], body.dl-barra .pie [data-nav="clients"], body.dl-barra .pie [data-nav="settings"]{ display:none; }
.pie .dl-tab span{ white-space:nowrap; }
.pie .dl-tab.dl-tab-fin{ color:var(--accent); }
/* Los dibujos a color del equipo (su pedido: modernos, como su imagen) */
.dl-eq-img{ flex:none; width:32px; height:32px; object-fit:contain; }
.dl-eq2 .dl-eq-img{ width:40px; height:40px; }
.dl-eq2 .dl-eq2-t{ display:flex; align-items:center; gap:8px; }
.dl-eq2 .dl-eq2-t > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-eq2 .dl-eq-fotos{ flex:none; display:inline-flex; align-items:center; gap:4px; margin-left:auto; padding:2px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:13px; font-weight:700; }
.dl-eq2 .dl-eq-fotos .ic{ width:15px; height:15px; }

/* ===== La lista de Dry Logs (su diseño del 14-oct). 2a versión, su pedido del mismo día: sin el título "Dry Logs"
   (todo sube), sin escalera — día, nivel y cuarto alineados al MISMO borde, una carpeta abre la siguiente —,
   fotos y letras más chicas para que quepa más. ===== */
#panel-secado .dl-lista{ gap:10px; }
.dl-lista details > summary{ list-style:none; display:flex; align-items:center; gap:10px; cursor:pointer; }
.dl-lista details > summary::-webkit-details-marker{ display:none; }
.dl-lista .dl-li-flecha{ flex:none; margin-left:auto; width:18px; height:18px; color:var(--ink-mute); transition:transform .15s; }
.dl-lista details[open] > summary > .dl-li-flecha{ transform:rotate(180deg); }
/* El día: una tarjeta. Adentro nada se mete para adentro: cada renglón llega de borde a borde. */
#panel-secado .dl-lista > .card.dl-li-dia{ margin:0; padding:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.dl-li-dia > summary{ padding:11px 14px; }
.dl-li-fecha{ font-size:17px; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.dl-li-est{ padding:2px 8px; border-radius:6px; font-size:12px; font-weight:700; }
.dl-li-est.ok{ background:#e7f7ec; color:#1f9a3c; }
.dl-li-est.prox{ background:var(--accent-soft); color:var(--accent); }
.dl-li-est.curso{ background:#fff3df; color:#b26a00; }
.dl-li-in{ display:flex; flex-direction:column; }
/* El nivel: renglón de sección (letra chica en mayúsculas). El cuarto: renglón de carpeta. Mismo borde los dos. */
.dl-li-niv, .dl-li-cu{ border:0; border-radius:0; background:none; }
.dl-li-niv > summary{ padding:8px 14px; border-top:1px solid var(--line); background:var(--bg2); }
.dl-li-niv > summary b{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.dl-li-niv > summary .dl-li-ic{ width:16px; height:16px; color:var(--ink-soft); }
.dl-li-cu > summary{ padding:10px 14px; border-top:1px solid var(--line); }
.dl-li-cu > summary b{ font-size:15px; font-weight:700; color:var(--ink); }
.dl-li-ic{ flex:none; width:20px; height:20px; color:var(--ink); stroke-width:1.6; }
.dl-li-cu > .dl-li-in{ padding:0 14px 10px; }
/* Las lecturas del cuarto: renglones compactos con la foto chica */
.dl-li-lec{ display:flex; align-items:center; gap:12px; width:100%; padding:8px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; font:inherit; text-align:left; cursor:pointer; }
.dl-li-lec:disabled{ cursor:default; }
.dl-li-mini{ flex:none; width:60px; height:60px; border-radius:8px; overflow:hidden; background:#e9eef5; display:grid; place-items:center; color:var(--ink-mute); }
.dl-li-mini .ic{ width:18px; height:18px; }
.dl-li-mini img{ width:100%; height:100%; object-fit:cover; display:block; }
.dl-li-dat{ flex:1; min-width:0; display:flex; flex-direction:column; gap:0; color:var(--ink-soft); font-size:13.5px; line-height:1.3; }
.dl-li-dat > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-li-dat b{ font-size:17px; font-weight:800; color:var(--ink); letter-spacing:-.01em; }
.dl-li-dat small{ font-size:12px; color:var(--ink-mute); }
.dl-li-dat b .dl-tend{ margin-left:5px; font-size:12.5px; font-weight:700; white-space:nowrap; }
.dl-li-chev{ flex:none; width:16px; height:16px; color:var(--ink-mute); }
/* Las fotos del cuarto ese día: una tira de cuadritos */
.dl-li-fotos{ display:flex; flex-direction:column; gap:6px; padding:8px 0; border-bottom:1px solid var(--line); }
.dl-li-fotos > small, .dl-li-eq > small{ color:var(--ink-mute); font-size:12px; font-weight:600; }
.dl-li-fotos > small b{ color:var(--ink-soft); }
.dl-li-tira{ display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; touch-action:pan-x pan-y; scrollbar-width:none; }
.dl-li-tira::-webkit-scrollbar{ display:none; }
.dl-li-foto{ flex:none; width:52px; height:52px; padding:0; border:0; border-radius:7px; overflow:hidden; background:#e9eef5; cursor:pointer; }
.dl-li-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
/* El equipo que había ese día: cuántos caben por fila depende del ancho; ningún nombre se sale de su cuadro.
   La raya entre uno y otro es una sombra a la izquierda; la de la primera columna queda fuera del cuadro. */
.dl-li-eq{ display:flex; flex-direction:column; gap:6px; padding:8px 0 0; }
.dl-li-eq > small em{ font-style:normal; color:var(--ink-mute); font-weight:500; }
.dl-li-eq-f{ display:flex; align-items:stretch; }
.dl-li-eq-g{ flex:1; min-width:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); row-gap:8px; overflow:hidden; }
.dl-li-eq-i{ flex:1; min-width:0; display:flex; align-items:center; gap:6px; padding:0 6px 0 7px; box-shadow:-1px 0 0 var(--line); }
.dl-li-eq-i .dl-eq-img{ width:26px; height:26px; }
.dl-li-eq-i > span{ min-width:0; display:flex; flex-direction:column; line-height:1.15; }
.dl-li-eq-i small{ display:block; font-size:12px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-li-eq-i b{ font-size:15px; color:var(--ink); }
.dl-li-eq-no{ flex:1; color:var(--ink-soft); font-size:13px; }
.dl-li-eq-ir{ flex:none; align-self:center; display:grid; place-items:center; width:32px; height:32px; border:0; border-left:1px solid var(--line); background:none; color:var(--ink-soft); cursor:pointer; }
.dl-li-eq-ir .ic{ width:18px; height:18px; }
.dl-li-nada{ margin:0; padding:9px 14px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:13px; }
.dl-li-vacio{ display:flex; align-items:center; gap:12px; margin:0 14px 12px; padding:12px; border:1.5px dashed var(--line2); border-radius:10px; }
.dl-li-dia > .dl-li-in > .dl-li-vacio{ margin-top:12px; }
.dl-li-vacio > .ic{ flex:none; width:24px; height:24px; color:var(--ink-soft); }
.dl-li-vacio b{ display:block; font-size:14px; font-weight:700; color:var(--ink); }
.dl-li-vacio small{ display:block; font-size:12.5px; color:var(--ink-soft); }
#panel-secado .dl-lista .dl-lista-mas{ width:100%; min-height:46px; font-size:16px; font-weight:600; gap:10px; border-radius:10px; }
.dl-lista-mas .ic{ width:22px; height:22px; }
.dl-lista-nota{ margin:-4px 0 6px; text-align:center; font-size:12.5px; color:var(--ink-soft); }
.dl-lista .aviso:empty{ display:none; }
/* La misma lista en la computadora: arriba solo View Report y + New Reading, a la derecha. */
.dl-lista-cab{ display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.dl-lista-acc{ display:flex; gap:10px; }
.dl-lista-acc .btn{ width:auto; min-height:40px; }
@media (min-width:900px){
  #panel-secado .dl-lista-web{ gap:12px; max-width:1100px; }
  /* Las lecturas de un cuarto, en columnas (la pantalla es ancha); todo sigue alineado al mismo borde */
  .dl-lista-web .dl-li-cu > .dl-li-in{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px, 100%), 1fr)); column-gap:24px; }
  .dl-lista-web .dl-li-cu > .dl-li-in > .dl-li-fotos, .dl-lista-web .dl-li-cu > .dl-li-in > .dl-li-eq{ grid-column:1 / -1; }
  .dl-lista-web .dl-li-foto{ width:64px; height:64px; }
  .dl-lista-web .dl-lista-mas{ max-width:420px; align-self:center; }
}

/* ---------- MEASUREMENTS (15 oct 2026): lo que se demolió, cuarto por cuarto (copiado de Medidas de Field Reports) ---------- */
/* Debajo de la pregunta (#dlgPregunta, 80) y de escoger cuarto (90); encima del detalle (62) y de #detHoja (70). */
.hoja.hoja-medida{ z-index:78; }
.med-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:0 0 14px; }
.med-cab-t{ min-width:0; flex:1 1 280px; }
.med-cab-t p{ margin:4px 0 0; color:var(--ink-soft); font-size:14px; line-height:1.45; }
.med-acc{ display:flex; gap:10px; flex-wrap:wrap; }
.med .vacio-tarj{ margin-bottom:14px; }
.card.med-alcance h3{ margin:0 0 4px; font-size:17px; font-weight:700; }
.med-alcance-ops{ display:grid; gap:10px; grid-template-columns:repeat(3, minmax(0,1fr)); margin:12px 0 10px; }
.med-nota-chica{ margin:6px 0 0; color:var(--ink-soft); font-size:13px; line-height:1.45; }
.med-nivel{ margin:22px 0 10px; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
/* Cada nivel se abre y se cierra, como los días del Dry Log (16-oct). */
.med-niv{ margin:12px 0 0; }
.med-niv > summary{ list-style:none; display:flex; align-items:center; gap:10px; cursor:pointer; padding:12px 14px; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--sombra); }
.med-niv > summary::-webkit-details-marker{ display:none; }
.med-niv-t{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.med-niv .med-nivel{ margin:0; }
.med-niv-t small{ color:var(--ink-soft); font-size:12.5px; }
.med-niv-flecha{ flex:none; margin-left:auto; width:18px; height:18px; color:var(--ink-mute); transition:transform .15s; }
.med-niv[open] > summary .med-niv-flecha{ transform:rotate(180deg); }
.med-niv-in{ padding-top:10px; }
.med-borrar-nivel{ width:100%; margin:2px 0 6px; }
.card.med-cuarto{ padding:14px 16px; }
.med-cuarto-cab{ display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
.med-cuarto-cab h3{ margin:0; font-size:17px; font-weight:700; }
.med-cuarto-cab small{ color:var(--ink-soft); font-size:13px; }
.med-filas{ border-top:1px solid var(--line); }
.med-fila{ display:flex; align-items:center; gap:10px; width:100%; min-height:52px; font:inherit; color:var(--ink); background:none; border:0; border-bottom:1px solid var(--line); padding:9px 4px; text-align:left; cursor:pointer; }
.med-fila:hover{ background:var(--bg2); }
.med-fila-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.med-fila-txt b{ font-size:15px; }
.med-fila-txt small{ color:var(--ink-soft); font-size:13px; }
.med-fila-res{ font-size:14.5px; font-weight:700; white-space:nowrap; }
.med-fila-res.falta{ color:var(--danger); }
.med-fila .med-chev{ width:16px; height:16px; color:var(--ink-mute); }
.med-tot{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:10px; font-size:13.5px; color:var(--ink-soft); }
.med-tot > span:first-child{ width:100%; font-size:12.5px; font-weight:700; }
.med-tot-i b{ color:var(--ink); }
.med-tot-i small{ color:var(--ink-mute); }
.med-agregar{ margin-top:12px; padding-top:10px; border-top:1px dashed var(--line2); }
.med-agregar > span{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:6px; }
.med-agregar .chip{ padding:6px 12px; font-size:13.5px; }
.card.med-partidas h3{ margin:0 0 8px; font-size:17px; font-weight:700; }
.med-tabla-caja{ overflow-x:auto; }
.med-tabla{ width:100%; border-collapse:collapse; font-size:14px; }
.med-tabla th{ text-align:left; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
.med-tabla td{ padding:8px; border-bottom:1px solid var(--line); }
.med-tabla .der{ text-align:right; }
.card.med-notas label{ display:block; margin-bottom:6px; }
.card.med-notas textarea{ width:100%; min-height:90px; font:inherit; font-size:16px; color:var(--ink); background:var(--card); border:1px solid var(--line2); border-radius:10px; padding:10px 12px; resize:vertical; }
.card.med-notas textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.18); }
.hoja-lista.med-forma{ padding:2px 18px 18px; }
.med-donde{ display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--bg2); border-radius:10px; font-size:14.5px; }
.med-donde span{ flex:1; min-width:0; }
.med-donde .ic{ width:18px; height:18px; color:var(--ink-soft); }
.med-et{ margin:14px 0 6px; font-size:13px; font-weight:700; color:var(--ink-soft); }
.med-dims{ display:flex; align-items:flex-end; gap:8px; margin-top:12px; }
.med-dims .field{ flex:1; margin:0; }
.med-x{ padding-bottom:12px; color:var(--ink-mute); font-weight:700; }
.field.med-dims1{ margin:12px 0 0; max-width:220px; }
.field.med-otro{ margin:10px 0 0; }
.med-res{ margin:10px 0 0; font-size:16px; font-weight:700; color:var(--accent); min-height:1.2em; }
.med-acomp{ display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 12px; border:1px solid var(--line2); border-radius:10px; font-size:14.5px; cursor:pointer; }
.med-acomp input{ width:20px; height:20px; flex:0 0 auto; accent-color:var(--accent); }
.med-forma .fila-botones{ margin-top:14px; }
.btn.med-otra, .btn.med-cancelar{ margin-top:10px; }
@media (max-width:899px){
  .med-alcance-ops{ grid-template-columns:1fr; }
  .med-acc{ width:100%; }
  .med-acc .btn{ flex:1 1 auto; }
}
.hoja.hoja-medida .hoja-caja{ max-height:92%; }
/* Lo que se toca con el dedo, al menos 44px (la regla de iOS). */
.med-donde .pdet-link{ min-height:44px; padding:0 4px; }
.med-agregar .chip.chip, .med-forma .chip.chip{ min-height:44px; }
/* Su corrección (15-oct): Scanova no usa botones de pastilla; esquinas como sus botones (8-10px). Solo en Measurements. */
.med-agregar .chip.chip, .med-forma .chip.chip{ border-radius:8px; }
/* Y en cuadrícula pareja, sin huecos entre botones (su corrección del 15-oct): las 6 partes en 3 columnas = 2 filas
   exactas en el teléfono (6 en una fila en la compu); los materiales en 3 columnas (4 en la compu). Un nombre largo
   se parte en dos renglones dentro de su botón en vez de empujar a los demás. */
.med-rejilla{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.med-rejilla .chip.chip{ width:100%; min-width:0; white-space:normal; line-height:1.2; text-align:center; padding:6px 8px; display:flex; align-items:center; justify-content:center; }
@media (min-width:600px){ .med-rejilla.med-mats.c4{ grid-template-columns:repeat(4, minmax(0, 1fr)); } .med-rejilla.med-partes{ grid-template-columns:repeat(6, minmax(0, 1fr)); } }
.card.med-pend p{ margin:0 0 10px; font-size:14.5px; line-height:1.45; }
.card.med-pend .aviso{ margin:0 0 10px; }
.doc-sub.doc-nota{ white-space:pre-wrap; }

/* ---------- PEGAR FOTOS (16-oct, pegar.js) ---------- */
.hoja.hoja-pegar .hoja-caja{ max-height:92%; }
@media (min-width:900px){ .hoja.hoja-pegar .hoja-caja{ max-height:80%; } }
.hoja-lista.pegar-cuerpo{ padding:0 18px 4px; }
.hoja-pegar .pegar-destino{ margin:0 0 12px; }
.hoja-pegar .pegar-fotos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 10px; }
.hoja-pegar .pegar-fotos:empty{ display:none; }
@media (min-width:900px){ .hoja-pegar .pegar-fotos{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.pegar-fotos .pegar-f{ position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--bg2); }
.pegar-fotos .pegar-f img{ width:100%; height:100%; object-fit:cover; display:block; }
.pegar-fotos .pegar-f.mal img{ opacity:.35; }
.pegar-f .pegar-mal{ position:absolute; left:6px; right:6px; bottom:6px; padding:3px 6px; border-radius:6px; background:rgba(12,20,36,.72); color:#fff; font-size:11px; font-weight:600; text-align:center; }
.pegar-f .pegar-quitar{ position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:7px; border:0; background:#fff; color:var(--ink); font-size:13px; line-height:26px; padding:0; cursor:pointer; box-shadow:0 1px 4px rgba(10,17,35,.25); }
.hoja-pegar .pegar-caja{ position:relative; min-height:140px; border:1.5px dashed var(--line2); border-radius:12px; display:flex; align-items:center; justify-content:center; text-align:center; margin:0 0 4px; }
.hoja-pegar .pegar-caja.llena{ min-height:56px; }
.hoja-pegar .pegar-caja:focus-within{ border-color:var(--accent); }
.pegar-caja .pegar-pista{ pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px; color:var(--ink-soft); }
.pegar-caja .pegar-pista .ic{ width:26px; height:26px; color:var(--accent); }
.pegar-caja .pegar-pista b{ color:var(--ink); font-size:15px; }
.pegar-caja .pegar-pista small{ font-size:12.5px; }
.pegar-caja.llena .pegar-pista .ic{ display:none; }
.pegar-caja .pegar-zona{ position:absolute; inset:0; z-index:1; border-radius:inherit; outline:none; color:transparent; caret-color:transparent; font-size:16px; overflow:hidden; -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
.hoja-pegar .pegar-botones{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px 18px; }
.hoja-pegar .pegar-botones .btn{ width:100%; }
.app .pegar-atrapa, body .pegar-atrapa{ position:absolute; left:-9999px; top:0; width:1px; height:1px; opacity:0; overflow:hidden; }

/* ---------- EDITOR DEL PLANO (17-oct, fase 1; planoeditor.js). Bloque nuevo: no cambia nada de lo que ya había. ----------
   Teléfono: toda la pantalla sin desplazarse (candado del body pe-fijo, nada fixed ni sticky): cabecera, el plano, una fila de
   herramientas y Back / Save abajo; lo escogido sube en una hoja de vidrio encima del plano. Computadora: tres columnas. */
body.pe-fijo main{ overflow:hidden; }
#pPlanoEditor:not([hidden]){ display:flex; flex-direction:column; height:100%; min-height:0; }
.pe-cab{ position:relative; display:flex; align-items:center; gap:8px; min-height:48px; padding:4px 10px; flex:0 0 auto; }
.pe-atras{ display:inline-flex; align-items:center; gap:2px; height:40px; padding:0 10px 0 2px; border:0; border-radius:8px; background:none; color:var(--accent); font:inherit; font-size:16px; font-weight:600; cursor:pointer; }
.pe-atras .ic{ width:24px; height:24px; }
.pe-tit{ flex:1; min-width:0; text-align:center; line-height:1.2; }
.pe-tit h1{ margin:0; font-size:16px; font-weight:700; letter-spacing:0; color:var(--ink); }
.pe-tit span{ display:block; font-size:12px; color:var(--ink-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pe-hist{ display:grid; grid-template-columns:repeat(2, 40px); gap:6px; }
.pe-ic{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0; border:1px solid var(--line2); border-radius:8px; background:var(--card); color:var(--ink); font:inherit; cursor:pointer; }
.pe-ic span{ display:none; }
.pe-ic[disabled]{ opacity:.4; cursor:default; }
.pe-cuerpo{ flex:1; min-height:0; display:flex; flex-direction:column; }
.pe-col{ display:none; }
.pe-escena{ position:relative; flex:1; min-height:0; overflow:hidden; background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pe-lienzo{ position:absolute; inset:0; overflow:hidden; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.pe-mapa{ position:absolute; left:0; top:0; transform-origin:0 0; }
.pe-mapa svg{ display:block; max-width:none; }
/* El vidrio (el mismo look de la rueda de materiales del Dry Log), un poco más tapado para que se lea encima del plano. */
.pe-vidrio{
  border:1px solid rgba(255,255,255,.85); color:#0f172a;
  background:
    radial-gradient(55% 130% at 0% 50%, rgba(129,166,255,.22), transparent 62%),
    radial-gradient(55% 130% at 100% 50%, rgba(129,166,255,.22), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(234,240,252,.82));
  -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(148,170,215,.28), 0 10px 26px rgba(37,99,235,.14);
}
:root[data-tema="oscuro"] .pe-vidrio{ border-color:rgba(255,255,255,.12); color:var(--ink); background:linear-gradient(180deg, rgba(30,40,60,.90), rgba(20,28,44,.86)); box-shadow:0 10px 26px rgba(0,0,0,.45); }
.pe-aviso{ position:absolute; left:12px; right:12px; top:10px; z-index:6; max-width:440px; margin:0 auto; padding:10px 14px; border-radius:14px; font-size:14px; font-weight:600; line-height:1.35; text-align:center; opacity:0; transform:translateY(-6px); transition:opacity .3s ease, transform .3s ease; pointer-events:none; }
.pe-aviso.ver{ opacity:1; transform:none; }
.pe-aviso:empty{ display:none; }
.pe-zoom{ position:absolute; right:10px; bottom:10px; z-index:5; display:grid; grid-auto-flow:column; gap:6px; }
.pe-zoom button{ width:40px; height:40px; display:grid; place-items:center; padding:0; border:1px solid var(--line2); border-radius:8px; background:var(--card); color:var(--ink); cursor:pointer; box-shadow:0 2px 8px rgba(16,40,80,.10); }
.pe-zoom .pe-solo-compu{ display:none; }
.pe-hoja{ position:absolute; left:8px; right:8px; bottom:8px; z-index:7; max-height:46%; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; border-radius:16px; padding:10px 12px 12px; }
.pe-hoja[hidden], .pe-velo[hidden]{ display:none !important; }
.pe-hoja-cab{ display:flex; align-items:flex-start; gap:8px; margin-bottom:2px; }
.pe-hoja-t{ flex:1; min-width:0; }
.pe-hoja-t b{ display:block; font-size:16px; font-weight:700; line-height:1.25; overflow-wrap:anywhere; }
.pe-hoja-t small{ display:block; margin-top:2px; font-size:12.5px; color:var(--ink-soft); }
.pe-tag{ color:var(--accent); font-weight:700; }
.pe-x{ width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center; padding:0; border:1px solid var(--line2); border-radius:8px; background:var(--card); color:var(--ink); font:inherit; font-size:15px; cursor:pointer; }
.pe-sec{ margin:10px 0 6px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); }
.pe-rejilla{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.pe-rejilla.pe-uno{ grid-template-columns:minmax(0, 1fr); }
.pe-otro, .pe-acc, .pe-rejilla.pe-uno{ margin-top:8px; }
.pe-op{ min-height:40px; min-width:0; padding:6px 6px; border:1px solid var(--line2); border-radius:8px; background:var(--card); color:var(--ink); font:inherit; font-size:13px; font-weight:600; line-height:1.2; text-align:center; cursor:pointer; overflow-wrap:normal; word-break:normal; hyphens:none; }
.pe-op.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.pe-op.rojo{ color:var(--danger); }
.pe-op.pe-valor{ font-weight:700; }
.pe-otro .pe-otro-in{ grid-column:span 2; min-width:0; height:40px; padding:0 10px; border:1px solid var(--line2); border-radius:8px; background:var(--card); color:var(--ink); font:inherit; font-size:16px; }
.pe-otro .pe-otro-in:focus, .pe-num input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.18); }
.pe-num{ display:flex; align-items:center; gap:4px; min-width:0; }
.pe-num input{ width:100%; min-width:0; height:40px; padding:0 8px; border:1px solid var(--line2); border-radius:8px; background:var(--card); color:var(--ink); font:inherit; font-size:16px; }
.pe-num span{ font-size:12px; color:var(--ink-soft); }
.pe-herr{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; padding:8px 10px 0; background:var(--card); flex:0 0 auto; }
.pe-t{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; min-height:54px; padding:4px 2px; border:1px solid var(--line2); border-radius:8px; background:var(--card); color:var(--ink); font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.pe-t .ic{ width:22px; height:22px; }
.pe-t.on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.pe-t[disabled]{ opacity:.4; cursor:default; }
.pe-dos{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pe-dos .btn{ min-width:0; border-radius:8px; }
.pe-pie{ padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:var(--card); flex:0 0 auto; }
.pe-velo{ position:absolute; inset:0; z-index:9; display:grid; place-items:center; padding:16px; background:rgba(12,20,36,.20); }
.pe-tarjeta{ width:100%; max-width:380px; padding:16px; border-radius:16px; }
.pe-tarjeta p{ margin:0 0 14px; font-size:15px; font-weight:600; line-height:1.4; text-align:center; }
.pe-lista{ display:flex; flex-direction:column; gap:4px; }
.pe-cuarto{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; column-gap:8px; width:100%; padding:8px 10px; border:1px solid transparent; border-radius:8px; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.pe-cuarto b{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pe-cuarto small{ grid-column:1; grid-row:2; font-size:11.5px; font-weight:600; color:var(--accent); }
.pe-cuarto span{ grid-column:2; grid-row:1 / span 2; font-size:12.5px; color:var(--ink-soft); }
.pe-cuarto:hover{ background:var(--bg2); }
.pe-cuarto.on{ background:var(--accent-soft); border-color:var(--accent); }
.pe-cuarto.mal{ border-color:var(--danger); }
.pe-nada{ margin:0; font-size:14px; line-height:1.45; color:var(--ink-mute); }
/* Con una tarjeta de vidrio abierta solo cuentan sus botones y Back: lo demás se ve apagado. */
#pPlanoEditor.pe-con-tarjeta .pe-hist, #pPlanoEditor.pe-con-tarjeta .pe-herr, #pPlanoEditor.pe-con-tarjeta .pe-izq{ opacity:.45; pointer-events:none; }
/* (17-oct, revisión) Las tres columnas solo desde 1400 px y con altura de sobra (planoeditor.js MEDIA_COMPU): la barra lateral (222)
   más el relleno y las dos columnas (560) se llevan unos 780 px, y desde 1400 quedan unos 620 para el plano. Más angosto (iPad,
   la compu de 1280 o 1366, la ventana chica) y con el iPhone acostado va el diseño del teléfono (el plano de 880 px o más). */
@media (max-width:1399px), (max-height:500px){
  body.pe-fijo .tope, body.pe-fijo .pie{ display:none !important; }
  body.pe-fijo main{ padding:0; }
  #pPlanoEditor:not([hidden]){ padding-top:env(safe-area-inset-top); background:var(--bg2); }
}
@media (max-width:1399px) and (min-width:900px) and (hover:hover) and (pointer:fine){
  .pe-zoom .pe-solo-compu{ display:grid; }
}
@media (min-width:1400px) and (min-height:501px){
  body.pe-fijo main{ padding:8px 24px 16px; }
  #pPlanoEditor.pe-pant{ max-width:none; }
  .pe-cab{ padding:2px 0 10px; }
  .pe-tit{ display:flex; align-items:baseline; gap:10px; text-align:left; }
  .pe-tit h1{ font-size:20px; }
  .pe-tit span{ font-size:14px; }
  .pe-hist{ grid-template-columns:repeat(2, auto); }
  .pe-ic{ width:auto; padding:0 12px; }
  .pe-ic span{ display:inline; font-size:14px; font-weight:600; }
  .pe-cuerpo{ display:grid; grid-template-columns:220px minmax(0, 1fr) 260px; gap:16px; }
  .pe-col{ display:flex; flex-direction:column; min-height:0; overflow:auto; padding:14px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
  .pe-col h3{ margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); }
  .pe-herr-rej{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:18px; }
  .pe-escena{ border:1px solid var(--line); border-radius:14px; }
  .pe-herr, .pe-pie{ display:none; }
  .pe-zoom .pe-solo-compu{ display:grid; }
  .pe-hoja{ display:none !important; }
  .pe-sel{ flex:1; min-height:0; overflow:auto; }
  .pe-der-pie{ margin-top:12px; }
  .pe-sel .pe-op{ padding:6px 3px; font-size:12.5px; }
}
.persona .lider-chip{ margin-left:6px; }
/* (17-oct, fase 2 del editor: paredes) seis herramientas en el teléfono; lo que se toca de las agarraderas de la pared mide 44 px
   a cualquier acercamiento (--pe-u = unidades del svg por px); el arrastre esconde la banda azul de lo escogido. */
.pe-herr{ grid-template-columns:repeat(6, minmax(0, 1fr)); gap:5px; }
.pe-t.pe-apagado{ opacity:.4; }
#peMapa .fp-wall-grab{ stroke-width:calc(var(--pe-u, 1) * 44px); }
#peMapa .fp-corner-handle{ stroke:transparent; stroke-width:calc(var(--pe-u, 1) * 30px); }
#peMapa.pe-arrastre .pe-capa-sel{ display:none; }
.pe-rejilla.pe-dos-col{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.pe-zoom .pe-girar{ font-size:20px; line-height:1; color:var(--ink); }
/* (tanda 3) estilo de puerta en 4; la revisión del plano con su número; cada cosa a revisar en su tarjeta */
.pe-rejilla.pe-cuatro{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.pe-alto{ margin-top:0; }
.pe-revisar{ position:relative; }
.pe-revisar b{ position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--danger); color:#fff; font-size:11px; line-height:18px; }
.pe-revisar b[hidden]{ display:none !important; }
.pe-rev{ margin-top:10px; padding:10px; border:1px solid var(--line2); border-radius:10px; }
.pe-rev p{ margin:0 0 8px; font-size:13px; line-height:1.4; }

/* ===== CONTENTS (18-oct, sql/fotos-18-contenidos.sql; diseños de Trazo y Pluma). Solo AGREGA reglas: nada de arriba cambia. ===== */
/* Teléfono, diseño D: dentro de Contents la barra de abajo trae Name · Select · Room (copia de las reglas del Dry Log). */
.pie .ct-tab{ display:none; }
body.ct-barra .pie .ct-tab{ display:flex; }
body.ct-barra .pie [data-nav="proyectos"], body.ct-barra .pie [data-nav="clients"], body.ct-barra .pie [data-nav="settings"]{ display:none; }
.pie .ct-tab span{ white-space:nowrap; }
.pie .ct-tab.ct-tab-fin{ color:var(--accent); }
/* Botones con esquina en cuadrícula pareja (el gemelo de .med-rejilla; dos clases para que la pastilla de .chip no gane). */
.med-rejilla.ct-rejilla{ margin:0 0 10px; }
.ct-rejilla .chip.chip{ border-radius:8px; min-height:44px; height:auto; font-size:14px; width:100%; min-width:0; white-space:normal; line-height:1.2; text-align:center; padding:6px 8px; display:flex; align-items:center; justify-content:center; gap:6px; }
.ct-rejilla .chip.chip .ic{ width:18px; height:18px; flex:none; }
.ct-rejilla .chip.chip[disabled]{ opacity:.55; cursor:default; }
.med-rejilla.ct-rejilla.c2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.med-rejilla.ct-rejilla.c4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
/* Estado del inventario */
.ct-estado{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
.ct-estado .mas-btn{ margin-left:auto; }
.dl-li-est.anul{ background:var(--p-arch-bg, #eef1f5); color:var(--p-arch, #56657c); }
.ct-sel-inv select{ height:36px; font-size:14px; padding:0 34px 0 12px; }
.ct-carpeta-btn{ margin-top:-6px; }
.ct-parche{ margin:0 0 12px; }
.ct-firmar{ margin:6px 0 14px; }
.ct-firmar p{ margin:0 0 8px; font-size:14px; }
.ct-firmar .ct-firmar-t{ color:var(--ink-soft); font-size:13.5px; }
/* Las tarjetas y filas de objetos (las de Photos, con las marcas en una línea) */
.ct-sin-nombre{ color:var(--ink-mute); font-weight:500; }
.ct-marcas{ display:flex; gap:4px; overflow:hidden; white-space:nowrap; margin-top:3px; min-height:0; }
.ct-marcas:empty{ display:none; }
.ct-marcas .etq-s{ font-size:11.5px; padding:2px 7px; flex:none; }
.ct-item .ffoto{ position:relative; }
.ct-item .ffoto img{ width:100%; height:100%; object-fit:cover; display:block; }
.ct-item .ct-xs{ left:auto; right:8px; top:8px; }
.ct-sube{ position:absolute; right:7px; bottom:7px; width:12px; height:12px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 2px rgba(0,0,0,.4); pointer-events:none; }
.ct-sube.nube{ display:none; }
.ct-sube.tel{ background:#f59e0b; }
.ct-sube.sube{ background:var(--accent); }
.ct-sube.err{ background:var(--danger); }
.ct-tanda{ margin-bottom:12px; }
.ct-herr{ flex-direction:row; justify-content:flex-end; margin:0 0 6px; }
.ct-pie{ margin:18px 0 6px; }
@media (max-width: 899px){ .ct-pie{ display:none; } }
/* Computadora: la barra de filtros en una fila */
@media (min-width: 900px){
  .ct-herr-compu{ flex-direction:row; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
  .ct-herr-compu .ct-buscar{ flex:1 1 150px; min-width:0; max-width:240px; }
  .ct-herr-compu .sel{ flex:0 1 auto; }
  .ct-herr-compu .sel select{ height:38px; font-size:14px; padding:0 34px 0 12px; }
  #panel-contenidos .pgrid.grid{ grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:16px; }
}
/* S4: Nombrar (foto grande y el campo encima del teclado; sin capas fijas) */
body.ct-nombrando .tope, body.ct-nombrando .pcab, body.ct-nombrando #fichaTabs, body.ct-nombrando #pie, body.ct-nombrando #fichaAviso{ display:none !important; }
@media (max-width: 899px){ body.ct-fijo #main{ overflow:hidden; } }
.ct-nombrar{ display:flex; flex-direction:column; gap:8px; min-height:220px; }
.ct-nombrar[hidden]{ display:none !important; }
.ct-n-cab{ flex:none; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; min-height:44px; }
.ct-n-b{ min-height:44px; min-width:44px; padding:0 10px; border-radius:8px; border:1px solid var(--line2); background:var(--card); color:var(--ink); font:inherit; font-size:15px; font-weight:600; display:inline-flex; align-items:center; gap:4px; cursor:pointer; }
.ct-n-b .ic{ width:18px; height:18px; }
.ct-n-cuenta{ text-align:center; font-weight:700; color:var(--ink-soft); font-size:14px; }
.ct-n-foto{ position:relative; flex:1 1 auto; min-height:0; background:#0b111c; border-radius:12px; overflow:hidden; }
.ct-n-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.ct-n-fila{ flex:none; display:grid; grid-template-columns:minmax(0,1fr) 64px; gap:8px; }
.ct-n-fila input{ height:52px; font:inherit; font-size:16px; color:var(--ink); background:var(--card); border:1px solid var(--line2); border-radius:10px; padding:0 12px; min-width:0; }
.ct-n-fila input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.18); }
.ct-n-ok.btn{ height:52px; min-height:52px; padding:0; border-radius:10px; }
.ct-nombrar.muy-apretado .ct-n-cab{ display:none; }
/* Avisos de vidrio de Contents (se van solos; el de Undo se puede tocar) */
.ct-aviso.pe-aviso{ top:calc(64px + env(safe-area-inset-top)); z-index:96; display:flex; align-items:center; justify-content:center; gap:12px; }
.ct-aviso.pe-aviso.con-undo.ver{ pointer-events:auto; }
.ct-aviso-undo{ font:inherit; font-size:14px; font-weight:700; color:var(--accent); background:none; border:0; min-height:44px; padding:0 6px; cursor:pointer; }
/* S5 en el teléfono: un objeto */
.ct-obj{ display:flex; flex-direction:column; gap:8px; padding-bottom:12px; }
.ct-obj-cab{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; }
.ct-obj-n{ font-size:20px; font-weight:800; }
.ct-obj-cab .fv-in{ height:44px; }
.ct-obj-foto{ position:relative; aspect-ratio:4 / 3; border-radius:10px; overflow:hidden; background:#0b111c; cursor:zoom-in; }
.ct-obj-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.ct-tira .fv-mini{ position:relative; }
.ct-tira .fv-mini small{ position:absolute; left:0; right:0; bottom:0; font-size:11.5px; color:#fff; background:rgba(0,0,0,.5); text-align:center; padding:1px 0; }
.ct-obj .med-et{ margin:8px 0 2px; }
.ct-nota{ width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--card); border:1px solid var(--line2); border-radius:10px; padding:10px 12px; resize:vertical; }
.ct-crew{ display:block; color:var(--ink-soft); font-size:12.5px; margin-top:4px; }
.ct-en{ display:flex; flex-direction:column; gap:4px; margin-top:8px; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.ct-obj-pie{ margin-top:10px; }
@media (max-width: 899px){ .ct-obj-pie{ display:none; } }
.ct-obj-pant .fv-panel .fila-botones{ margin-top:14px; }
/* La cámara de Contents (la misma #camara): el nombre opcional arriba (el teclado nunca lo tapa) y Item/Barcode/... abajo */
.cam-extra[hidden]{ display:none !important; }
.ct-cam-nombre{ position:absolute; left:12px; right:12px; top:calc(78px + env(safe-area-inset-top)); display:grid; grid-template-columns:minmax(0,1fr) 56px 44px; gap:8px; z-index:3; }
.ct-cam-nombre[hidden]{ display:none !important; }
.ct-cam-nombre input{ height:44px; min-width:0; font:inherit; font-size:16px; color:#0f1a2e; background:rgba(255,255,255,.94); border:0; border-radius:10px; padding:0 12px; }
.ct-cam-ok, .ct-cam-todos{ height:44px; border:0; border-radius:10px; font:inherit; font-size:15px; font-weight:700; cursor:pointer; display:grid; place-items:center; }
.ct-cam-ok{ background:#2563eb; color:#fff; }
.ct-cam-todos{ background:rgba(255,255,255,.18); color:#fff; }
.ct-cam-todos .ic{ width:20px; height:20px; }
.cam-zoom.ct-cam-roles{ position:absolute; left:50%; transform:translateX(-50%); bottom:calc(232px + env(safe-area-inset-bottom)); margin:0; z-index:3; }
.ct-cam-roles .cam-z{ min-height:44px; padding:0 12px; }
/* Capas de la firma: la galería, la autorización y "guardando" (absolutas dentro de .app) */
.ct-capa{ position:absolute; inset:0; z-index:90; background:var(--card); color:var(--ink); }
.ct-gal-capa{ display:flex; flex-direction:column; padding-top:env(safe-area-inset-top); }
.ct-gal-cab{ flex:none; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px 16px; font-size:15px; }
.ct-gal-cab span{ color:var(--ink-soft); font-size:14px; }
.ct-gal{ position:relative; flex:1 1 auto; min-height:0; background:#0b111c; }
.ct-gal img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.ct-galcap{ flex:none; padding:10px 16px; }
.ct-galcap .ct-galcap-n{ font-size:12px; font-weight:700; color:var(--ink-soft); letter-spacing:.02em; }
.ct-galcap .ct-galcap-t{ font-size:19px; font-weight:700; margin:4px 0 6px; }
.ct-galcap .ct-galcap-t span{ color:var(--ink-soft); font-weight:400; }
.ct-gal-pie{ flex:none; padding:0 16px calc(12px + env(safe-area-inset-bottom)); }
.ct-firma{ display:grid; grid-template-columns:47% 53%; padding-top:env(safe-area-inset-top); }
.ct-firma .ct-f-txt{ padding:12px 14px; overflow:auto; border-right:1px solid var(--line); }
.ct-firma .ct-f-txt h3{ font-size:14px; color:var(--accent); margin:0 0 6px; }
.ct-firma .ct-f-txt p{ font-size:12px; line-height:1.42; margin:0 0 6px; }
.ct-firma .ct-f-txt p.ct-f-es{ font-size:10.5px; color:var(--ink-mute); }
.ct-firma .ct-f-txt .ct-f-res{ font-size:12.5px; color:var(--ink-soft); margin-bottom:8px; }
.ct-firma .ct-f-pad{ padding:12px 14px calc(12px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:8px; min-height:0; }
.ct-firma-campos{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ct-firma-campos label{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.ct-firma-campos .sel select{ height:40px; font-size:15px; }
.ct-firma .ct-f-sigwrap{ flex:1; min-height:110px; position:relative; border:1px solid var(--line2); border-radius:10px; background:#fff; }
.ct-firma canvas.ct-f-sig{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; }
.ct-firma .ct-f-sigwrap .ct-f-linea{ position:absolute; left:14px; right:14px; bottom:22px; border-bottom:1px solid #94a3b8; pointer-events:none; }
.ct-firma-acc .btn{ flex:1 1 0; min-height:44px; padding:0 6px; }
.ct-firma .ct-f-gire{ position:absolute; inset:0; background:var(--card); display:none; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px; z-index:2; }
.ct-firma .ct-f-gire[hidden]{ display:none !important; }
.ct-firma .ct-f-gire .btn{ min-width:200px; }
.ct-firma .ct-f-gire .btn[hidden]{ display:none !important; }
@media (orientation:portrait){ .ct-firma .ct-f-gire{ display:flex; } }
.ct-firma.vertical{ grid-template-columns:1fr; grid-template-rows:minmax(0,38%) minmax(0,62%); }
.ct-firma.vertical .ct-f-txt{ border-right:none; border-bottom:1px solid var(--line); }
.ct-firma.vertical .ct-f-gire{ display:none !important; }
.ct-espera{ display:grid; place-items:center; background:rgba(12,20,36,.38); z-index:97; }
.ct-espera p{ margin:0; padding:16px 22px; border-radius:14px; background:var(--card); font-weight:600; box-shadow:0 10px 30px rgba(10,17,35,.25); }
/* La hoja del PDF (copia de la de Field Reports, con el encabezado de Scanova360). Se dibuja fuera de la pantalla. */
.ct-pila{ position:absolute; left:-9999px; top:0; width:760px; background:#fff; }
.ct-hoja{ width:760px; height:1075px; background:#fff; color:#0f1a2e; font-family:system-ui, -apple-system, 'Segoe UI', sans-serif; padding:34px 38px; position:relative; overflow:hidden; box-sizing:border-box; }
.ct-hoja .ct-h-cab{ display:flex; justify-content:space-between; align-items:flex-end; border-bottom:3px solid #0f1a2e; padding-bottom:8px; margin-bottom:8px; }
.ct-hoja .ct-h-cab h1{ font-size:22px; line-height:1.1; font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin:0; }
.ct-hoja .ct-h-cab h1 small{ display:block; font-size:12px; font-weight:600; text-transform:none; letter-spacing:0; color:#56657c; margin-top:3px; }
.ct-hoja .ct-h-cab .ct-h-emp{ text-align:right; font-size:12px; line-height:1.4; }
.ct-hoja .ct-h-cab .ct-h-emp b{ font-size:14px; }
.ct-hoja .ct-h-marca{ font-size:17px; font-weight:800; }
.ct-hoja .ct-h-marca span{ color:#2563eb; }
.ct-hoja .ct-h-meta{ display:grid; grid-template-columns:1.1fr .7fr 1.6fr 1fr; gap:4px 14px; font-size:12px; line-height:1.45; margin-bottom:10px; }
.ct-hoja .ct-h-meta b{ color:#56657c; font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.05em; display:block; }
.ct-hoja .ct-h-meta .ct-h-tel{ display:block; color:#56657c; }
.ct-hoja .ct-h-rej{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.ct-hoja .ct-h-tarj{ height:168px; border:1px solid #d3dce8; border-radius:8px; padding:6px; box-sizing:border-box; overflow:hidden; display:flex; flex-direction:column; gap:4px; background:#fff; }
.ct-hoja .ct-h-tarj .ct-h-foto{ position:relative; height:106px; border-radius:5px; overflow:hidden; background:#e9edf3; }
.ct-hoja .ct-h-tarj .ct-h-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.ct-hoja .ct-h-tarj .ct-h-foto .ct-h-mas, .ct-hoja .ct-h-tarj .ct-h-foto .ct-h-nt{ position:absolute; bottom:4px; padding:1px 6px; border-radius:4px; background:rgba(0,0,0,.66); color:#fff; font-size:9.5px; font-weight:700; }
.ct-hoja .ct-h-tarj .ct-h-foto .ct-h-mas{ left:4px; } .ct-hoja .ct-h-tarj .ct-h-foto .ct-h-nt{ right:4px; }
.ct-hoja .ct-h-tarj .ct-h-tt{ font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ct-hoja .ct-h-tarj .ct-h-tt b{ font-variant-numeric:tabular-nums; margin-right:3px; }
.ct-hoja .ct-h-tarj .ct-h-pl{ display:flex; align-items:center; gap:4px; min-width:0; }
.ct-hoja .ct-h-tarj .ct-h-sts{ display:flex; gap:4px; flex:1; min-width:0; overflow:hidden; }
.ct-hoja .ct-h-st{ display:inline-block; font-size:10px; font-weight:700; padding:3px 7px; border-radius:5px; color:#fff; white-space:nowrap; }
.ct-hoja .ct-h-tarj .ct-h-cat{ flex:none; background:#eef1f5; border-radius:5px; padding:3px 7px; font-size:10px; color:#3f4a5a; white-space:nowrap; max-width:90px; overflow:hidden; text-overflow:ellipsis; }
.ct-hoja .ct-h-notas h2, .ct-hoja .ct-h-aut h2{ font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; margin:4px 0 6px; }
.ct-hoja .ct-h-notas p{ font-size:11.5px; line-height:1.4; margin:0 0 4px; }
.ct-hoja .ct-h-resu{ display:flex; flex-wrap:wrap; gap:8px 10px; margin:10px 0 0; font-size:12.5px; }
.ct-hoja .ct-h-resu span{ border:1px solid #d3dce8; border-radius:6px; padding:6px 10px; }
.ct-hoja .ct-h-resu b{ font-size:15px; margin-right:4px; }
.ct-hoja .ct-h-aut{ border:1.5px solid #0f1a2e; border-radius:6px; padding:14px 16px; margin-top:14px; }
.ct-hoja .ct-h-aut p{ font-size:12px; line-height:1.5; margin:0 0 8px; }
.ct-hoja .ct-h-aut p.ct-h-en{ font-size:11px; color:#56657c; }
.ct-hoja .ct-h-firma{ display:grid; grid-template-columns:1.2fr 1fr; gap:18px; margin-top:10px; align-items:end; }
.ct-hoja .ct-h-firma .ct-h-caja{ border-bottom:1.5px solid #0f1a2e; height:84px; display:flex; align-items:flex-end; }
.ct-hoja .ct-h-firma .ct-h-caja img{ max-height:78px; max-width:100%; }
.ct-hoja .ct-h-firma .ct-h-lab{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:#56657c; margin-top:4px; }
.ct-hoja .ct-h-firma .ct-h-dat{ font-size:12.5px; line-height:1.55; }
.ct-hoja .ct-h-leg{ font-size:10.5px; color:#56657c; line-height:1.45; margin-top:12px; }
.ct-hoja .ct-h-pie{ position:absolute; left:38px; right:38px; bottom:22px; display:flex; justify-content:space-between; font-size:10.5px; color:#56657c; border-top:1px solid #d3dce8; padding-top:6px; }
.ct-hoja .ct-h-pie.ct-h-reimp{ bottom:40px; border:none; color:#c0392b; font-weight:700; }
.ct-hoja .ct-h-borrador{ position:absolute; left:0; right:0; top:46%; text-align:center; font-size:44px; line-height:1.1; font-weight:800; letter-spacing:.08em; color:rgba(192,57,43,.18); transform:rotate(-24deg); pointer-events:none; }
.ct-cam-roles .cam-z{ white-space:nowrap; }
.btn.ct-mas-inv{ width:44px; padding:0; }
@media (min-width: 900px){ .ct-herr-compu.pherr{ flex-wrap:wrap; } .ct-herr-compu .sel{ flex:1 1 130px; min-width:0; max-width:220px; } .ct-herr-compu .sel select{ width:100%; min-width:0; } .ct-herr-compu .vistas{ margin-left:auto; flex:none; } }
.pie .ct-tab.ct-vacio{ visibility:hidden; pointer-events:none; }
.ct-obj-guardar{ margin:0 0 4px; }
.ct-obj-guardar .btn{ flex:1; }
/* Contents: el enlace para firmar, los datos del inventario, lo firmado (18-oct, segunda pasada) */
.card.ct-enlace{ margin:6px 0 14px; }
.ct-enlace p{ margin:0 0 8px; font-size:14px; }
.ct-enlace p small{ display:block; color:var(--ink-soft); font-size:12.5px; margin-top:2px; }
.ct-enlace .ct-enlace-est{ color:var(--ink-soft); }
.ct-enlace-url{ word-break:break-all; font-size:13px; color:var(--ink-soft); background:var(--bg2); border-radius:8px; padding:8px 10px; margin:0 0 10px; }
.ct-firmar-b.btn{ margin-top:2px; }
.ct-firmado-acc{ margin:0 0 14px; }
.ct-campo{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin:0 0 10px; }
.ct-campos2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ct-obj .ct-extra-quitar{ margin:2px 0 0; }
.ct-doc-vista .ct-doc-hoja{ display:block; width:100%; max-width:760px; margin:0 auto 14px; box-shadow:0 1px 6px rgba(0,0,0,.18); }

/* ===== Contents de toda la empresa (18-oct, manager; contenidos_empresa.js). Misma tabla que All Projects ===== */
.navitem.navitem[hidden], .mas-item.mas-item[hidden]{ display:none !important; }
#pContenidosEmp .ce-ic{ display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
#pContenidosEmp .ce-ic .ic{ width:20px; height:20px; }
#pContenidosEmp .ce-sub{ font-size:12px; color:var(--ink-mute); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#pContenidosEmp .ce-fila{ cursor:pointer; }
#pContenidosEmp .ce-cab span{ font-size:15px; font-weight:600; color:var(--ink); text-align:left; }
#pContenidosEmp .ce-vacio{ padding:28px 16px; text-align:center; }
#pContenidosEmp .ce-pie{ margin-top:14px; }
#pContenidosEmp .volver[data-atras-pie]{ margin-top:16px; }

/* ===== LABOR LOGS (18-oct, laborlogs.js) y TIMESHEET del proyecto (timesheet.js) ===== */
#pLabor .lb{ max-width:860px; }
.lb-cab{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px; }
.lb-acc{ display:flex; gap:10px; flex-wrap:wrap; }
/* Manager en el teléfono: Search by Address | Rates en una fila pareja y New Labor Log abajo a lo ancho (cuadrícula, sin huecos) */
@media (max-width:599px){ .lb-acc.lb-acc3{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); width:100%; } .lb-acc.lb-acc3 .btn{ min-width:0; } .lb-acc.lb-acc3 .btn-accent{ grid-column:1 / -1; } }
.lb-sec{ margin:18px 0 2px; }
.lb-sub{ margin:4px 0 10px; color:var(--ink-soft); font-size:14px; line-height:1.45; }
.lb-lista{ display:flex; flex-direction:column; gap:8px; }
.lb-fila{ display:flex; flex-direction:column; gap:3px; width:100%; text-align:left; font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; min-height:44px; }
button.lb-fila{ cursor:pointer; }
.lb-fila small{ color:var(--ink-soft); font-size:13px; }
.lb-fila.nuevo{ border-color:var(--accent); }
.lb-fila.nuevo .lb-fila-t b{ font-weight:800; }
.lb-fila.on{ border-color:var(--accent); background:var(--accent-soft); }
.lb-fila.pide{ border-color:#f0c48a; }
.lb-fila-t{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lb-fila .btn{ margin-top:8px; }
.lb-chip-rojo.etq-s{ background:#fdecec; color:#b42318; font-size:12px; padding:3px 8px; }
.lb-chip-ok.etq-s{ background:var(--accent-soft); color:var(--accent); font-size:12px; padding:3px 8px; }
.lb-nota{ margin:6px 0 0; padding:8px 10px; border-radius:8px; background:#fff4e5; color:#7a4a00; font-size:14px; }
/* Botones con esquinas en cuadrícula pareja (el patrón .med-rejilla; dos clases para que la pastilla de .chip no gane) */
.med-rejilla.lb-rejilla{ margin:8px 0 0; }
.med-rejilla.lb-rejilla.c2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.med-rejilla.lb-rejilla.c4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:600px){ .med-rejilla.lb-rejilla.c4{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.lb-rejilla .chip.chip{ border-radius:8px; min-height:44px; height:auto; font-size:14px; width:100%; min-width:0; white-space:normal; line-height:1.2; text-align:center; padding:6px 8px; display:flex; align-items:center; justify-content:center; gap:6px; }
.lb-rejilla .chip.chip .ic{ width:18px; height:18px; flex:none; }
.lb-rejilla .chip.chip[disabled]{ opacity:.55; cursor:default; }
.lb-tabs{ margin:0 0 12px; max-width:420px; }
.lb-cola{ border-color:#f0c48a; }
.lb-cola p{ margin:0; font-size:14.5px; }
.lb-panel{ margin:2px 0 6px; }
.lb-linea{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.lb-linea span{ min-width:0; display:flex; flex-direction:column; }
.lb-linea small{ color:var(--ink-soft); font-size:12.5px; font-weight:500; overflow-wrap:anywhere; }
.lb-linea b{ white-space:nowrap; }
.lb-tot{ display:flex; justify-content:space-between; gap:12px; padding:10px 0 2px; font-weight:800; font-size:16px; }
.lb-tot:empty{ display:none; }
.lb-tot.rojo{ color:var(--danger); }
/* El formulario */
.lb-banda{ border-color:var(--accent); background:var(--accent-soft); }
.lb-banda p{ margin:0 0 8px; font-size:14.5px; }
.lb-info{ padding-bottom:4px; }
.forma-grid.lb-grid3{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.lb-turno{ padding-bottom:6px; }
.lb-turno-cab{ display:flex; align-items:center; justify-content:space-between; min-height:36px; margin-bottom:6px; }
.lb-turno-cab b{ font-size:16px; }
.lb-quitar{ color:var(--danger); min-height:44px; }
.lb-horas{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.lb-nombres{ position:relative; display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:44px; padding:5px 6px; background:var(--card); border:1px solid var(--line2); border-radius:10px; }
.lb-nombres:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.18); }
.field .lb-nombres input.lb-nom-in{ flex:1 1 120px; min-width:100px; border:0; height:34px; padding:0 6px; box-shadow:none; background:none; }
.field .lb-nombres input.lb-nom-in:focus{ box-shadow:none; }
.lb-tag{ display:inline-flex; align-items:center; gap:4px; padding:5px 4px 5px 10px; border-radius:7px; background:#e3edff; color:#1d4ed8; font-size:14px; font-weight:600; }
.lb-tag button{ font:inherit; font-size:12px; border:0; background:none; color:inherit; cursor:pointer; min-width:28px; min-height:28px; }
.lb-tag.duda{ background:#fdecec; color:#b42318; }
.lb-sug{ top:calc(100% + 4px); }
.lb-dudas{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.lb-duda{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:8px 10px; border-radius:8px; background:#fdecec; color:#7a1b12; font-size:13.5px; }
.lb-duda .ic{ width:16px; height:16px; vertical-align:-3px; margin-right:4px; }
.lb-ligado:empty{ display:none; }
.lb-proy{ display:inline-flex; align-items:center; gap:6px; margin-top:6px; color:var(--accent); font-size:13.5px; font-weight:600; }
.lb-proy .ic{ width:16px; height:16px; }
.lb-pregunta{ margin-top:8px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg2); }
.lb-pregunta p{ margin:0; font-size:14px; }
.lb-sug-nota{ margin:4px 8px; color:var(--ink-soft); font-size:13px; }
.lb-extra{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 12px; }
.lb-extra .ancho{ grid-column:1 / -1; }
.lb-ex-monto{ display:flex; gap:8px; align-items:center; }
.lb-ex-monto .icono-btn{ flex:none; width:44px; height:44px; color:var(--danger); }
.lb-extras > .enlace-editar{ min-height:44px; margin-bottom:4px; }
.lb-calc{ display:flex; flex-wrap:wrap; gap:6px 12px; padding:8px 0 4px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-soft); }
.lb-calc .warn{ color:#b45309; font-weight:600; }
.lb-calc .lb-monto{ margin-left:auto; color:var(--ink); font-weight:700; }
.lb-turno-mas{ margin:0 0 14px; }
.lb-pie{ margin:6px 0 18px; }
@media (max-width: 899px){ .lb-pie-salida{ display:none; } }
/* (18-oct, QA) el Back de abajo en la computadora: pegado a la orilla izquierda del contenido, como el Back de abajo de
   Contents (antes la caja de 260 px + .fila-botones{justify-content:flex-end} lo dejaba flotando a media fila) */
.fila-botones.lb-pie-salida{ margin-top:18px; justify-content:flex-start; }
/* Las hojas (encime / hueco / nombres / devolver / vista previa) */
.lb-hoja[hidden]{ display:none !important; }
.lb-hoja .hoja-caja{ max-width:620px; }
.lb-hoja-cuerpo{ padding:4px 18px 8px; font-size:15px; line-height:1.4; }
.lb-hoja-botones{ padding:10px 18px 14px; }
.lb-hoja-nota{ margin-top:8px; }
.lb-alerta{ padding:10px 12px; border-radius:10px; background:#fff4e5; border:1px solid #f0c48a; margin-bottom:12px; }
.lb-alerta.rojo{ background:#fef3f2; border-color:#fda29b; }
.lb-tabla{ background:var(--bg2); border-radius:10px; padding:6px 12px 8px; margin-bottom:12px; }
.lb-tabla small{ color:var(--ink-soft); font-size:12.5px; }
.lb-tl{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.lb-tl .rojo{ color:#b42318; font-weight:700; }
.lb-ul{ margin:0; padding-left:20px; }
.lb-ul li{ margin:0 0 10px; }
.lb-ul small{ display:block; color:var(--ink-soft); font-size:13.5px; }
.lb-pista{ margin-top:12px; padding:10px 12px; border-radius:10px; background:#fff4e5; border:1px solid #f0c48a; font-size:14.5px; }
.lb-avisov.pe-aviso{ top:calc(64px + env(safe-area-inset-top)); z-index:96; }
/* La hoja (Vista previa, el labor log abierto y el PDF): la familia de Documents (.doc-hoja, .doc-enc, .doc-datos, .doc-tabla) */
.lb-hoja.lb-hoja-ancha .hoja-caja{ max-width:860px; }
.doc-hoja.lb-doc{ padding:16px; box-shadow:none; }
.doc-datos.lb-doc-datos .lb-doc-ancho{ grid-column:span 2; }
.doc-tabla.lb-doc-tabla table{ margin-top:10px; font-size:13px; }
.doc-tabla.lb-doc-tabla th{ text-align:left; }
.doc-tabla.lb-doc-tabla td{ text-align:left; white-space:normal; vertical-align:top; overflow-wrap:anywhere; min-width:0; }
.doc-tabla.lb-doc-tabla td:first-child{ min-width:0; width:34px; }
.doc-tabla.lb-doc-tabla th.n, .doc-tabla.lb-doc-tabla td.n{ text-align:right; white-space:nowrap; }
.doc-tabla.lb-doc-tabla .lb-c > span, .doc-tabla.lb-doc-tabla .lb-c > small{ display:block; }
.doc-tabla.lb-doc-tabla td small{ margin:2px 0 0; font-size:11.5px; color:var(--ink-soft); }
.lb-doc-rojo, .lb-doc-falta{ color:var(--danger); }
.lb-doc-tot{ display:flex; justify-content:flex-end; align-items:baseline; gap:14px; margin:14px 0 0; }
.lb-doc-tot span{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.lb-doc-tot b{ font-size:20px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.lb-doc-tot.rojo b{ color:var(--danger); }
.doc-sub.lb-doc-der{ text-align:right; margin:4px 0 0; }
.lb-tot small{ display:block; font-size:13px; font-weight:600; color:var(--ink-soft); }
/* Buscar una dirección (manager): la casilla y su botón en una fila; la hoja "Address History" con una sección por log */
.lb-buscar{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.lb-buscar .field{ flex:1 1 220px; margin-bottom:0; }
.lb-buscar .btn{ min-height:44px; }
.doc-sala.lb-doc-sec{ margin:18px 0 0; }
/* Teléfono: cada turno en su tarjeta con el rótulo de cada dato (la tabla de 7 columnas no cabe en 375 px) */
@media (max-width:640px){
  .doc-hoja.lb-doc{ padding:12px; }
  .doc-datos.lb-doc-datos{ grid-template-columns:1fr 1fr; }
  .doc-tabla.lb-doc-tabla{ overflow:visible; }
  .doc-tabla.lb-doc-tabla table, .doc-tabla.lb-doc-tabla tbody, .doc-tabla.lb-doc-tabla tr, .doc-tabla.lb-doc-tabla td{ display:block; width:auto; }
  .doc-tabla.lb-doc-tabla tr:first-child{ display:none; }
  .doc-tabla.lb-doc-tabla tr{ border:1px solid var(--line); border-radius:10px; padding:4px 10px; margin:10px 0 0; }
  .doc-tabla.lb-doc-tabla td, .doc-tabla.lb-doc-tabla td:first-child, .doc-tabla.lb-doc-tabla td.n{ display:flex; gap:8px; text-align:left; white-space:normal; width:auto; padding:6px 0; }
  .doc-tabla.lb-doc-tabla tr td:last-child{ border-bottom:0; }
  .doc-tabla.lb-doc-tabla td::before{ content:attr(data-et); flex:0 0 92px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); padding-top:2px; }
  .doc-tabla.lb-doc-tabla .lb-c{ flex:1 1 auto; min-width:0; }
  .lb-doc-tot{ justify-content:space-between; }
}
/* TIMESHEET */
.ptab[hidden]{ display:none !important; }
.ts-resumen{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 14px; font-size:14.5px; color:var(--ink-soft); }
.ts-resumen b{ color:var(--ink); }
.ts-rojo-t{ color:#b42318; display:inline-flex; align-items:center; gap:6px; }
.ts-rojo-t b{ color:#b42318; }
.ts-rojo-t .ic{ width:16px; height:16px; }
.ts-dia{ margin:0 0 16px; }
.ts-dia-t{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 8px; font-size:16px; font-weight:700; }
.ts-dia-t small{ color:var(--ink-soft); font-size:13.5px; font-weight:600; }
.ts-fila{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin:0 0 8px; min-height:44px; }
.ts-fila[data-ts-log]{ cursor:pointer; }
.ts-fila small{ display:block; color:var(--ink-soft); font-size:13px; margin-top:2px; overflow-wrap:anywhere; }
.ts-fila-t{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ts-fila-t .etq-s{ font-size:12px; padding:3px 8px; }
.ts-fila.rojo{ border-color:#fda29b; background:#fef3f2; }
.ts-choque{ margin-top:6px; color:#b42318; font-size:13.5px; font-weight:600; }
.ts-choque .ic{ width:15px; height:15px; vertical-align:-3px; margin-right:4px; }
.ts-fila.propuesto{ background:var(--bg2); border-style:dashed; color:var(--ink-soft); }
.ts-prop small{ margin-top:6px; }
#pContenidosEmp .ce-abriendo{ opacity:.55; pointer-events:none; }

/* ===== (18-oct) MOISTURE MAP (mapahumedad.js). Bloque nuevo: usa las piezas del editor del plano (pe-cab, pe-escena, pe-vidrio,
   pe-zoom, pe-t, pe-op) sin cambiarlas. Teléfono: todo en una pantalla sin desplazarse (candado del body mh-fijo, nada fixed):
   cabecera, el plano, los 7 colores, las 4 herramientas y Back abajo. Computadora (900+): el plano y una columna a la derecha. ===== */
body.mh-fijo main{ overflow:hidden; }
#pMapaHumedad:not([hidden]){ display:flex; flex-direction:column; height:100%; min-height:0; }
#pMapaHumedad .mh-cuerpo{ flex:1; min-height:0; display:flex; flex-direction:column; }
#pMapaHumedad .mh-escena{ flex:1; min-height:0; }
#pMapaHumedad .mh-panel{ flex:0 0 auto; display:flex; flex-direction:column; gap:6px; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:var(--card); }
#pMapaHumedad .mh-colores{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; }
#pMapaHumedad .mh-color{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; min-height:46px; padding:4px 1px; border:1px solid var(--line2); border-radius:8px; background:var(--card); color:var(--ink); font:inherit; font-size:10px; font-weight:600; line-height:1.1; cursor:pointer; }
#pMapaHumedad .mh-color i{ display:block; width:22px; height:14px; border-radius:4px; border:1px solid rgba(0,0,0,.12); }
#pMapaHumedad .mh-color span{ max-width:100%; overflow:hidden; text-overflow:clip; white-space:nowrap; }
#pMapaHumedad .mh-color.on{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
#pMapaHumedad .mh-herr{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:5px; }
#pMapaHumedad .mh-herr .pe-t{ min-height:48px; }
#pMapaHumedad .mh-herr .mh-todo{ color:var(--danger); }
#pMapaHumedad .mh-nota{ display:none; margin:0; font-size:12.5px; line-height:1.45; color:var(--ink-mute); }
#pMapaHumedad .mh-pie .btn{ width:100%; border-radius:8px; }
#pMapaHumedad .pe-hist{ grid-template-columns:repeat(2, 40px); }
/* (revisión 2) "Check": botón con esquinas, ámbar, sin contador */
#pMapaHumedad .pe-ic.mh-rev{ border-color:#b7791f; color:#8a5a12; background:#fff7e6; }
#pMapaHumedad .mh-rev i{ font-style:normal; font-weight:800; font-size:18px; line-height:1; }
#pMapaHumedad .mh-rev[hidden]{ display:none !important; }
#pMapaHumedad .mh-herr.mh-tres{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
#pMapaHumedad .mh-herr [hidden]{ display:none !important; }
#pMapaHumedad .mh-zoom{ bottom:10px; }
#pMapaHumedad #mhMapa .mh-capa{ pointer-events:none; }
#pMapaHumedad #mhMapa #fmHandles .fm-corner{ pointer-events:all; }
.mh-doc-lineas p{ margin:2px 0; font-size:13px; }
.mh-doc-lineas i{ color:#2980b9; }
.doc-sub.mh-doc-ojo{ color:#8a5a12; font-weight:600; }
@media screen and (max-width:899px){
  body.mh-fijo .tope, body.mh-fijo .pie{ display:none !important; }
  body.mh-fijo main{ padding:0; }
  #pMapaHumedad:not([hidden]){ padding-top:env(safe-area-inset-top); background:var(--bg2); }
}
@media screen and (min-width:900px){   /* el corte del Moisture Map (el editor del plano usa 1400) */
  body.mh-fijo main{ padding:8px 24px 16px; }
  #pMapaHumedad.pe-pant{ max-width:none; }
  #pMapaHumedad .pe-cab{ padding:2px 0 10px; }
  #pMapaHumedad .pe-tit{ display:flex; align-items:baseline; gap:10px; text-align:left; }
  #pMapaHumedad .pe-tit h1{ font-size:20px; }
  #pMapaHumedad .pe-tit span{ font-size:14px; }
  #pMapaHumedad .pe-hist{ grid-template-columns:repeat(2, auto); }
  #pMapaHumedad .pe-ic{ width:auto; padding:0 12px; }
  #pMapaHumedad .pe-ic span{ display:inline; font-size:14px; font-weight:600; }
  #pMapaHumedad .mh-escena{ border:1px solid var(--line); border-radius:14px; }
  #pMapaHumedad .mh-panel{ margin-top:10px; border:1px solid var(--line); border-radius:14px; }
}
@media screen and (min-width:1180px){   /* con espacio: la columna de la derecha (900-1179: las barras de abajo, el plano a lo ancho) */
  #pMapaHumedad .mh-cuerpo{ display:grid; grid-template-columns:minmax(0, 1fr) 280px; gap:16px; }
  #pMapaHumedad .mh-panel{ margin-top:0; overflow:auto; padding:14px; gap:12px; }
  #pMapaHumedad .mh-colores{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; }
  #pMapaHumedad .mh-color{ flex-direction:row; justify-content:flex-start; gap:8px; min-height:44px; padding:6px 10px; font-size:13px; }
  #pMapaHumedad .mh-herr{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; }
  #pMapaHumedad .mh-nota{ display:block; }
  #pMapaHumedad .mh-pie{ margin-top:auto; }
}
@media (max-width:359px){ #pMapaHumedad .mh-color{ font-size:8.5px; letter-spacing:-.2px; } }
/* Floor Plan en el teléfono: el botón va en el lugar vacío de la barra de 2D / 3D (no agrega altura: la página del plano sigue
   cabiendo quieta con 3 niveles). */
#panel-plano .pl-tel-mapa{ display:inline-flex; align-items:center; gap:6px; height:44px; max-width:100%; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--accent); font:inherit; font-size:14px; font-weight:600; white-space:nowrap; cursor:pointer; }
#panel-plano .pl-tel-mapa .ic{ width:17px; height:17px; flex:none; }
#panel-plano .pl-tel-mapa[disabled]{ opacity:.45; cursor:default; }
@media (max-width:359px){ #panel-plano .pl-tel-mapa{ padding:0 8px; font-size:13px; } #panel-plano .pl-tel-mapa .pl-tel-mapa-2{ display:none; } }
#panel-plano.pl-cerrado .pl-tel-mapa{ visibility:hidden; }
/* (QA 18-12) Documents > View del mapa: la hoja entra en la pantalla (un plano girado salía de ~2440 px de alto) */
.doc-plano.mh-doc-plano svg{ max-height:calc(100vh - 170px); max-height:calc(100dvh - 170px); }
/* (18-oct) Contents con 5 carpetas (Structural Damage, como FR): la cuadrícula queda pareja; la que sobra va a lo ancho. */
.med-rejilla.ct-rejilla.c2 > :last-child:nth-child(odd){ grid-column:1 / -1; }
.med-rejilla.ct-rejilla.c4 > :last-child:nth-child(4n+1){ grid-column:1 / -1; }
/* (18-oct) estado de gente: en el teléfono, un renglón con 3 botones (líder + Pause + Remove) no cabe en una fila: el del
   líder va a lo ancho y los dos de estado debajo, parejos. En la computadora siguen en una fila. */
@media (max-width:899px){
  .persona-acciones.tres{ display:grid; grid-template-columns:1fr 1fr; }
  .persona-acciones.tres > :first-child{ grid-column:1 / -1; }
}
/* (18-oct) estado de gente: lo que pasó con Pause / Remove / Readmit se dice debajo de esa persona */
.persona > .persona-aviso{ grid-column:1 / -1; margin:0; }
/* (18-oct) estado de gente: el pausado ve sus horas y pagos viejos (solo leer) en su pantalla */
#esperaVerHoras{ margin-top:10px; }
.espera-horas{ text-align:left; margin-top:12px; max-height:45vh; overflow:auto; -webkit-overflow-scrolling:touch; }
.espera-horas h3{ font-size:15px; margin:12px 0 6px; }
.espera-horas ul{ list-style:none; margin:0; padding:0; }
.espera-horas li{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; }
.espera-horas li > span:last-child{ text-align:right; }
.espera-horas small{ display:block; color:var(--ink-soft); font-size:12px; }
.espera-horas .espera-total, .espera-horas .espera-nota{ font-size:13px; color:var(--ink-soft); margin:4px 0; }
.espera-horas[hidden], #esperaVerHoras[hidden]{ display:none !important; }

/* ===== (18-oct) Materiales: la pestaña Materials (materiales.js). Botones con esquinas en cuadrícula pareja (.med-rejilla
   .ct-rejilla), su propia pantalla con Back arriba y abajo, avisos en vidrio (#mtAviso = .ct-aviso). Todo con prefijo mt-. ===== */
.mt .mt-nota{ font-size:13.5px; color:var(--ink-soft); line-height:1.45; margin:0 0 12px; }
.mt .mt-tit{ margin-bottom:10px; }
.mt .mt-tit .dl-li-est{ flex:none; }
.mt-volver-arriba{ margin:0 0 6px; }
.mt-mini{ color:var(--accent); background:var(--accent-soft); }
.mt-mini .ic{ width:24px; height:24px; }
.mt-fila-der{ display:inline-flex; align-items:center; gap:4px; }
.mt-fila-hoja.on{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.mt-meta{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin:0 0 12px; }
.mt-meta small{ display:block; font-size:11.5px; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.03em; }
.mt-meta b{ display:block; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mt-parche{ margin-bottom:12px; }
/* (18-oct, el dueño) El tipo de trabajo arriba de la hoja: Water · Mold · Fire, se pueden varios. */
.mt-tipos-caja{ margin:0 0 12px; }
.mt-tipos-caja .mt-et small{ font-weight:500; color:var(--ink-mute); }
.mt-tipos.med-rejilla{ margin:6px 0 0; }
.mt-lista-tt.med-rejilla{ margin:0 0 10px; }
/* Las cuatro partes de la hoja (teléfono): 2 × 2, botones con esquinas, todos del mismo tamaño. */
.mt-partes{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin:0 0 12px; }
.mt-parte{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:104px; padding:12px; font:inherit; text-align:left; color:var(--ink); background:var(--card); border:1px solid var(--line2); border-radius:12px; cursor:pointer; }
.mt-parte .ic{ width:26px; height:26px; color:var(--accent); margin-bottom:4px; }
.mt-parte b{ font-size:15px; line-height:1.2; }
.mt-parte small{ font-size:13px; color:var(--ink-soft); }
.mt-parte:active{ background:var(--bg2); }
.mt-parte[disabled]{ cursor:default; opacity:.7; }
.mt-acc{ margin-top:4px; }
.ct-rejilla .chip.chip.mt-rojo{ color:var(--danger); }
/* Un renglón: nombre y unidad, y el número grande con − y + (44 px). */
.mt-renglones{ display:flex; flex-direction:column; gap:8px; margin:0 0 12px; }
.mt-renglon{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px 8px 8px 12px; }
.mt-renglon.con{ border-color:var(--accent); }
.mt-r-t{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.mt-r-t b{ font-size:14.5px; line-height:1.25; overflow-wrap:anywhere; }   /* los nombres de Xactimate son largos: se leen enteros (nunca cortados con …) */
.mt-r-t small{ font-size:12.5px; color:var(--ink-soft); }
.mt-paso{ display:inline-grid; grid-template-columns:44px 64px 44px; align-items:center; border:1px solid var(--line2); border-radius:10px; overflow:hidden; background:var(--card); }
.mt-paso button{ height:44px; border:0; background:var(--bg2); color:var(--ink); display:grid; place-items:center; cursor:pointer; font:inherit; }
.mt-paso button[disabled]{ opacity:.4; cursor:default; }
.mt-paso input{ height:44px; width:100%; min-width:0; border:0; border-left:1px solid var(--line); border-right:1px solid var(--line); text-align:center; font:inherit; font-size:18px; font-weight:700; color:var(--ink); background:var(--card); -moz-appearance:textfield; appearance:textfield; }
.mt-paso input::-webkit-outer-spin-button, .mt-paso input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.mt-x{ width:44px; height:44px; border:0; border-radius:10px; background:none; color:var(--ink-mute); display:grid; place-items:center; cursor:pointer; }
.mt-x:active{ background:var(--bg2); }
/* Protección de emergencia: cantidad, tamaño de UNA pieza, dónde y el total. */
.mt-renglon.mt-ep{ grid-template-columns:minmax(0,1fr); gap:8px; padding:10px 12px; }
.mt-r-cab{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:28px; }
.mt-r-cab .mt-x{ width:36px; height:36px; margin:-4px -4px -4px 0; }
.mt-ep-rej{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:end; }
.mt-campo{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.mt-campo > span{ font-size:12px; color:var(--ink-mute); font-weight:600; }
.mt-dim{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:6px; }
.mt-dim i{ font-style:normal; color:var(--ink-mute); }
.mt-dim input, .mt-donde{ height:44px; width:100%; min-width:0; border:1px solid var(--line2); border-radius:10px; padding:0 10px; font:inherit; font-size:16px; color:var(--ink); background:var(--card); box-sizing:border-box; }
.mt-res{ margin:0; font-size:14px; font-weight:700; color:var(--accent); min-height:0; }
.mt-res:empty{ display:none; }
.mt-agregar{ display:flex; flex-direction:column; gap:10px; margin:0 0 12px; }
.mt-agregar input{ height:44px; border:1px solid var(--line2); border-radius:10px; padding:0 12px; font:inherit; font-size:16px; background:var(--card); color:var(--ink); }
.mt-unidades.med-rejilla{ grid-template-columns:repeat(6, minmax(0,1fr)); margin:0; }
.mt-unidades .chip.chip{ padding:6px 2px; font-size:13px; }
.mt-editar-lista{ margin:2px 0 12px; min-height:44px; }
/* Fotos */
.mt-foto-acc{ margin:0 0 12px; }
.mt-fotos{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin:0 0 12px; }
.mt-foto{ position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--bg2); }
.mt-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.mt-foto img:not([src]){ visibility:hidden; }
.mt-foto-x{ position:absolute; top:4px; right:4px; width:32px; height:32px; border:0; border-radius:8px; background:rgba(15,26,46,.62); color:#fff; display:grid; place-items:center; cursor:pointer; }
.mt-foto-x::after{ content:""; position:absolute; inset:-6px; }
.mt-sube{ position:absolute; left:4px; bottom:4px; font-size:11px; font-weight:700; color:#fff; background:rgba(15,26,46,.62); border-radius:6px; padding:2px 6px; }
/* Firmar: cabe en una sola vista del teléfono. */
.mt-firma{ display:flex; flex-direction:column; gap:10px; }
.mt-firma-res{ margin:0; font-size:13.5px; color:var(--ink-soft); }
.mt-aut{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:14px; line-height:1.45; }
.mt-aut p{ margin:0; }
.mt-aut .mt-es{ margin-top:6px; color:var(--ink-soft); font-size:13px; }
.mt-et{ font-size:13px; font-weight:600; color:var(--ink-soft); }
.mt-firma .fv-in{ height:44px; font-size:16px; }
.mt-rel.med-rejilla{ margin:0; }
.mt-sig{ position:relative; height:150px; background:#fff; border:1px solid var(--line2); border-radius:12px; overflow:hidden; touch-action:none; }
.mt-sig canvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; z-index:1; }
.mt-sig-linea{ position:absolute; left:18px; right:18px; bottom:34px; border-top:1px dashed #b8c3d4; }
.mt-sig small{ position:absolute; left:18px; bottom:12px; font-size:12px; color:#8a97ab; }
.mt-firmar-b{ min-height:48px; }
.mt-firmado{ display:flex; align-items:center; gap:6px; font-size:14px; margin:0; color:var(--ok, #1f9a3c); }
.mt-anular{ display:flex; flex-direction:column; gap:10px; }
.mt-anular p{ margin:0; font-size:14px; line-height:1.45; }
.mt-anular textarea{ min-height:90px; border:1px solid var(--line2); border-radius:10px; padding:10px 12px; font:inherit; font-size:16px; background:var(--card); color:var(--ink); }
.mt-pie{ margin-top:14px; }
.mt-vacio .btn{ margin-top:6px; }
.mt-doc-firma{ display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; margin:6px 0 10px; }
.mt-doc-firma img{ width:220px; height:auto; border-bottom:1px solid var(--line2); }
.mt-doc-firma p{ margin:0; font-size:13px; line-height:1.5; }
.mt-sig-borrar{ position:absolute; top:6px; right:6px; z-index:2; min-height:36px; padding:0 12px; font:inherit; font-size:13.5px; font-weight:600; color:var(--accent); background:var(--card); border:1px solid var(--line2); border-radius:8px; cursor:pointer; }
.mt-firma .mt-aut{ font-size:13.5px; line-height:1.4; }
.mt-firma .mt-aut .mt-es{ font-size:12.5px; }
.mt-firma .mt-sig{ height:132px; }
/* COMPUTADORA: la lista a la izquierda, la hoja a la derecha con sus cuatro partes en tarjetas. Se mide el ANCHO DE LA
   PESTAÑA (no el de la ventana): con Project Details abierto la pestaña es angosta y todo va en una columna. */
.mt{ container-type:inline-size; }
.mt-tarj{ margin:0 0 12px; min-width:0; }
.mt-tarj-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:0 0 10px; }
.mt-tarj-cab h3{ margin:0; font-size:16px; }
.mt-tarj-cab small{ font-size:13px; color:var(--ink-soft); white-space:nowrap; }
.mt-tarj .mt-agregar{ box-shadow:none; border:1px dashed var(--line2); }
.mt-izq-cab{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 6px; flex-wrap:wrap; }
.mt-izq-cab .sec-t{ margin:0; }
/* En la columna de la izquierda (angosta) el estado va debajo del resumen, no a la derecha. */
.mt-est-izq{ display:none; }
.mt-izq .mt-est-izq{ display:block; margin-top:3px; }
.mt-izq .mt-fila-der .dl-li-est{ display:none; }
.mt-izq .pfila-txt small{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mt-tarjetas{ margin-top:12px; }
@container (min-width:700px){
  .mt-acc.med-rejilla{ max-width:420px; }
  .mt-firma{ max-width:620px; }
  .mt-firma .mt-sig{ height:180px; }
  .mt-meta{ max-width:620px; }
}
@container (min-width:720px){
  .mt-dos{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:20px; align-items:start; }
  .mt-izq .pfila-txt b{ font-size:14px; }
}
@container (min-width:860px) and (max-width:1059px){
  /* Pestaña ancha con las tarjetas en una columna: cantidad, tamaño y dónde en un solo renglón. */
  .mt-renglon.mt-ep{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); column-gap:12px; align-items:end; }
  .mt-renglon.mt-ep .mt-r-cab, .mt-renglon.mt-ep .mt-res{ grid-column:1 / -1; }
}
@container (min-width:1060px){
  .mt-tarjetas{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; align-items:start; }
  .mt-tarj{ margin:0; }
  .mt-tarj .mt-fotos{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}

/* ===== (18-oct) nombre de la compañía: el renglón Company en Settings (el subtítulo dice el nombre de hoy) y su pantalla
   (empresa.js, #pCompania). Prefijo cia-. ===== */
.cia-lista{ margin:6px 0 14px; }
.cia-lista .mas-item{ min-height:56px; }
.cia-renglon{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cia-renglon-sub{ font-size:13px; font-weight:500; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cia-card .field input{ font-size:16px; }
.cia-nota{ font-size:13.5px; line-height:1.45; color:var(--ink-soft); margin:2px 0 8px; }
.cia-card .fila-botones .btn{ min-height:44px; }