/* =========================================================
   Servicios · Sistemas contra incendios
   ========================================================= */
:root{
  --rojo:#c43c10;
  --rojo-claro:#e2643a;
  --rojo-tenue:#fdeee8;
  --tinta:#171a1f;
  --tinta-suave:#4b5563;
  --gris:#6b7280;
  --gris-claro:#9ca3af;
  --fondo:#f4f5f7;
  --tarjeta:#ffffff;
  --linea:#e4e6ea;
  --linea-fuerte:#d3d6dc;
  --sombra:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --sombra-alta:0 8px 24px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.06);
  --radio:14px;
  --radio-sm:10px;
  --barra-alto:62px;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  background:var(--fondo);
  color:var(--tinta);
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--rojo);text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;line-height:1.25;letter-spacing:-.01em}
p{margin:0}

/* ---------- barra superior ---------- */
.barra{
  position:sticky;top:0;z-index:40;
  height:var(--barra-alto);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 22px;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--linea);
}
.marca{display:flex;align-items:center;gap:11px;color:inherit}
.marca-logo{height:44px;width:auto;flex:none}
.marca-separador{width:1px;height:28px;background:var(--linea-fuerte);flex:none;margin:0 2px 0 1px}
.marca-texto{display:flex;flex-direction:column;line-height:1.05}
.marca-texto strong{font-size:16px;letter-spacing:-.02em}
.marca-texto small{font-size:11.5px;color:var(--gris);letter-spacing:.01em}
.barra-acciones{display:flex;align-items:center;gap:8px}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  height:38px;padding:0 14px;border-radius:10px;
  border:1px solid var(--linea-fuerte);background:#fff;color:var(--tinta);
  font-size:14px;font-weight:600;white-space:nowrap;
  transition:background .15s,border-color .15s,transform .05s,box-shadow .15s;
}
.btn:hover{background:#fafafa;border-color:#c3c7cf}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px;flex:none}
.btn-rojo{background:var(--rojo);border-color:var(--rojo);color:#fff;box-shadow:0 2px 6px rgba(196,60,16,.24)}
.btn-rojo:hover{background:#a52f0b;border-color:#a52f0b}
.btn-fantasma{background:transparent;border-color:transparent;color:var(--tinta-suave)}
.btn-fantasma:hover{background:#eceef1;color:var(--tinta)}
.btn-chico{height:32px;padding:0 11px;font-size:13px;border-radius:8px}
.btn-icono{width:38px;padding:0;justify-content:center}
.btn-icono.btn-chico{width:32px}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ---------- vista ---------- */
.vista{max-width:1180px;margin:0 auto;padding:26px 22px 90px}

.cabecera-seccion{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:2px 0 18px;flex-wrap:wrap}
.cabecera-seccion h1{font-size:23px}
.cabecera-seccion .sub{color:var(--gris);font-size:13.5px;margin-top:3px}
.buscador{position:relative}
.buscador input{
  height:38px;width:250px;padding:0 12px 0 34px;border-radius:10px;
  border:1px solid var(--linea-fuerte);background:#fff;
}
.buscador svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--gris-claro)}

/* ---------- rejilla de servicios ---------- */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:16px}
.tarjeta-obra{
  position:relative;
  background:var(--tarjeta);border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;box-shadow:var(--sombra);
  transition:box-shadow .18s,transform .18s,border-color .18s;
  display:flex;flex-direction:column;color:inherit;
}
.tarjeta-obra:hover{box-shadow:var(--sombra-alta);transform:translateY(-2px);border-color:#d8dbe1}
.portada{
  position:relative;height:142px;background:#e9eaee center/cover no-repeat;
  display:flex;align-items:flex-end;
}
.portada.vacia{
  background:
    radial-gradient(circle at 78% 22%, rgba(196,60,16,.10), transparent 55%),
    linear-gradient(135deg,#f2f3f5,#e7e9ee);
  align-items:center;justify-content:center;
}
.portada.vacia svg{width:46px;height:46px;color:#aeb3bd}
.portada.vacia .logo-tenue{height:48px;width:auto;opacity:.17;filter:saturate(.6)}
.fecha-chip{
  position:absolute;top:10px;left:10px;
  background:rgba(23,26,31,.72);color:#fff;font-size:11.5px;font-weight:600;
  padding:4px 9px;border-radius:999px;letter-spacing:.02em;
  backdrop-filter:blur(4px);
}
.portada::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.28),rgba(0,0,0,0) 55%);
  pointer-events:none;
}
.portada.vacia::after{display:none}
.tarjeta-cuerpo{padding:13px 15px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.tarjeta-cuerpo h3{font-size:16px;letter-spacing:-.015em}
.tarjeta-meta{font-size:12.8px;color:var(--gris);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.tarjeta-meta .punto{width:3px;height:3px;border-radius:50%;background:#c9ccd3}
.cuentas{display:flex;gap:14px;margin-top:auto;padding-top:9px;font-size:12.5px;color:var(--tinta-suave)}
.cuenta{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.cuenta svg{width:15px;height:15px;color:var(--gris-claro)}

/* ---------- vacío ---------- */
.vacio{
  border:1.5px dashed var(--linea-fuerte);border-radius:var(--radio);
  padding:52px 24px;text-align:center;background:#fff;
}
.vacio .icono-vacio{width:54px;height:54px;margin:0 auto 14px;color:#cdd1d8}
.vacio .logo-vacio{height:70px;width:auto;margin:0 auto 16px}
.vacio h2{font-size:17px;margin-bottom:6px}
.vacio p{color:var(--gris);font-size:14px;max-width:430px;margin:0 auto 18px}

/* ---------- ficha de servicio ---------- */
.volver{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  color:var(--gris);margin-bottom:12px;
}
.volver:hover{color:var(--tinta)}
.volver svg{width:15px;height:15px}
.ficha-cabecera{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:18px 20px;box-shadow:var(--sombra);margin-bottom:16px;
}
.ficha-titulo{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.ficha-titulo h1{font-size:22px}
.ficha-datos{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:7px;font-size:13.5px;color:var(--tinta-suave)}
.ficha-datos span{display:inline-flex;align-items:center;gap:6px}
.ficha-datos svg{width:14px;height:14px;color:var(--gris-claro)}
.ficha-notas{
  margin-top:13px;padding-top:12px;border-top:1px solid var(--linea);
  font-size:13.5px;color:var(--tinta-suave);white-space:pre-wrap;
}
.ficha-notas strong{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-claro);margin-bottom:3px}

/* ---------- pestañas ---------- */
.pestanas{
  display:flex;gap:4px;background:#fff;border:1px solid var(--linea);
  border-radius:12px;padding:4px;margin-bottom:18px;box-shadow:var(--sombra);
  overflow-x:auto;scrollbar-width:none;
}
.pestanas::-webkit-scrollbar{display:none}
.pestana{
  flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:38px;padding:0 16px;border-radius:9px;border:0;background:transparent;
  font-size:13.5px;font-weight:600;color:var(--tinta-suave);white-space:nowrap;
}
.pestana:hover{background:#f3f4f6;color:var(--tinta)}
.pestana.activa{background:var(--rojo-tenue);color:var(--rojo)}
.pestana svg{width:15px;height:15px;flex:none;opacity:.85}
.pestana .num{
  font-size:11px;font-weight:700;background:#e9eaee;color:var(--tinta-suave);
  padding:1px 6px;border-radius:999px;min-width:20px;
}
.pestana.activa .num{background:#f7d2cf;color:#96290a}

/* ---------- barra de herramientas ---------- */
.herramientas{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.herramientas .pista{font-size:12.5px;color:var(--gris);margin-left:auto}

/* ---------- fotos ---------- */
.rejilla-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.foto{
  position:relative;background:#fff;border:1px solid var(--linea);border-radius:12px;
  overflow:hidden;box-shadow:var(--sombra);cursor:zoom-in;
  transition:box-shadow .16s,transform .16s;
}
.foto:hover{box-shadow:var(--sombra-alta);transform:translateY(-1px)}
.foto .marco{aspect-ratio:4/3;background:#eef0f3 center/cover no-repeat;position:relative}
.foto .pie{padding:7px 10px 8px;font-size:12.4px;line-height:1.3}
.foto .pie .nota{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foto .pie .zona{color:var(--gris);font-size:11.6px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foto .pie .sin-nota{color:var(--gris-claro);font-style:italic;font-weight:500}
.foto .borrar{
  position:absolute;top:7px;right:7px;width:27px;height:27px;border-radius:8px;border:0;
  background:rgba(17,19,23,.62);color:#fff;display:grid;place-items:center;opacity:0;
  transition:opacity .15s,background .15s;backdrop-filter:blur(3px);
}
.foto:hover .borrar{opacity:1}
.foto .borrar:hover{background:#c62828}
.foto .borrar svg{width:14px;height:14px}
.soltar{outline:2px dashed var(--rojo);outline-offset:6px;background:#fff8f7}

/* ---------- medidas ---------- */
.panel{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);overflow:hidden}
.form-medida{
  display:grid;grid-template-columns:minmax(160px,2fr) 92px 104px minmax(120px,1.4fr) 40px;
  gap:9px;padding:13px;border-bottom:1px solid var(--linea);background:#fbfbfc;
}
.form-medida input,.form-medida select{
  height:38px;border:1px solid var(--linea-fuerte);border-radius:9px;padding:0 11px;background:#fff;min-width:0;
}
.form-medida input:focus,.form-medida select:focus{outline:2px solid rgba(196,60,16,.18);border-color:var(--rojo-claro)}
.lista-medidas{display:flex;flex-direction:column}
.medida{
  display:grid;grid-template-columns:minmax(150px,2.4fr) auto minmax(110px,1.5fr) auto;
  gap:10px;align-items:center;padding:11px 14px;border-bottom:1px solid #f0f1f4;
}
.medida:last-child{border-bottom:0}
.medida:hover{background:#fcfcfd}
.medida .nombre{font-weight:600;font-size:14px}
.medida .detalle{font-size:12.3px;color:var(--gris);margin-top:1px}
.valor-caja{display:inline-flex;align-items:baseline;gap:4px;background:var(--rojo-tenue);color:#96290a;border-radius:8px;padding:4px 10px;font-weight:700;white-space:nowrap}
.valor-caja .u{font-size:11.5px;font-weight:600;opacity:.8}
.medida .acciones{display:flex;gap:4px;opacity:.35;transition:opacity .15s}
.medida:hover .acciones{opacity:1}
.mini{
  width:30px;height:30px;border-radius:8px;border:1px solid transparent;background:transparent;
  display:grid;place-items:center;color:var(--tinta-suave);
}
.mini:hover{background:#eceef1;color:var(--tinta)}
.mini.rojo:hover{background:#fdeceb;color:var(--rojo)}
.mini svg{width:15px;height:15px}

/* ---------- planos ---------- */
.lista-planos{display:flex;flex-direction:column}
.plano{
  display:flex;align-items:center;gap:13px;padding:13px 15px;border-bottom:1px solid #f0f1f4;
}
.plano:last-child{border-bottom:0}
.plano:hover{background:#fcfcfd}
.plano-icono{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--rojo-tenue);color:var(--rojo);
}
.plano-icono.img{background:#eef4fd;color:#1e5fa8}
.plano-icono svg{width:21px;height:21px}
.plano-info{flex:1;min-width:0}
.plano-info .nombre{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plano-info .det{font-size:12.2px;color:var(--gris);margin-top:2px;display:flex;gap:6px;flex-wrap:wrap}
.plano-acciones{display:flex;gap:6px;flex:none}

/* ---------- visor de planos ---------- */
.visor{position:fixed;inset:0;z-index:90;background:#111317;display:flex;flex-direction:column}
.visor-barra{
  display:flex;align-items:center;gap:12px;padding:0 14px;height:54px;flex:none;
  background:#181b20;border-bottom:1px solid #262a31;color:#e8eaee;
}
.visor-barra .titulo{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visor-barra .det{font-size:11.5px;color:#8b929e}
.visor-barra .espacio{flex:1}
.visor-barra button{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:8px;
  border:1px solid #313640;background:#22262d;color:#e8eaee;font-size:12.8px;font-weight:600;
}
.visor-barra button:hover{background:#2c313a}
.visor-barra button svg{width:15px;height:15px}
.visor-lienzo{flex:1;position:relative;overflow:hidden;touch-action:none}
.visor iframe{width:100%;height:100%;border:0;background:#fff}
.visor-imagen{
  position:absolute;inset:0;display:grid;place-items:center;cursor:grab;overflow:hidden;
  background:#111317;
}
.visor-imagen.arrastrando{cursor:grabbing}
.visor-imagen img{
  max-width:none;max-height:none;transform-origin:center center;will-change:transform;
  user-select:none;-webkit-user-drag:none;box-shadow:0 10px 40px rgba(0,0,0,.6);background:#fff;
}

/* ---------- capa / modales ---------- */
.capa{
  position:fixed;inset:0;z-index:80;background:rgba(17,19,23,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:aparecer .14s ease-out;backdrop-filter:blur(2px);
}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
.modal{
  background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.3);
  width:100%;max-width:520px;max-height:calc(100vh - 40px);overflow:auto;
  animation:subir .16s ease-out;
}
@keyframes subir{from{transform:translateY(8px);opacity:.6}to{transform:none;opacity:1}}
.modal-cabecera{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 0}
.modal-cabecera h2{font-size:17px}
.modal-cuerpo{padding:16px 18px}
.modal-pie{display:flex;justify-content:flex-end;gap:8px;padding:0 18px 18px}
.campo{margin-bottom:13px}
.campo label{display:block;font-size:12.5px;font-weight:600;color:var(--tinta-suave);margin-bottom:5px}
.campo input,.campo textarea,.campo select{
  width:100%;border:1px solid var(--linea-fuerte);border-radius:10px;padding:9px 11px;background:#fff;
}
.campo textarea{resize:vertical;min-height:74px}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:2px solid rgba(196,60,16,.16);border-color:var(--rojo-claro)}
.campo.doble{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.campo .ayuda{font-size:11.5px;color:var(--gris-claro);margin-top:4px}

/* ---------- visor de foto ---------- */
.lightbox{position:fixed;inset:0;z-index:95;background:rgba(10,11,13,.96);display:flex;flex-direction:column}
.lb-barra{display:flex;align-items:center;gap:10px;padding:10px 14px;color:#e8eaee;flex:none}
.lb-barra .contador{font-size:12.5px;color:#9aa1ac;font-variant-numeric:tabular-nums}
.lb-barra .espacio{flex:1}
.lb-barra button{
  height:34px;padding:0 11px;border-radius:8px;border:1px solid #2c313a;background:#1b1f25;
  color:#e8eaee;display:inline-flex;align-items:center;gap:6px;font-size:12.8px;font-weight:600;
}
.lb-barra button:hover{background:#252a32}
.lb-barra button svg{width:15px;height:15px}
.lb-cuerpo{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:0 58px;overflow:hidden}
.lb-cuerpo img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}
.lb-flecha{
  position:absolute;top:50%;transform:translateY(-50%);width:44px;height:64px;border-radius:10px;
  border:0;background:rgba(255,255,255,.07);color:#fff;display:grid;place-items:center;
}
.lb-flecha:hover{background:rgba(255,255,255,.16)}
.lb-flecha.izq{left:8px}.lb-flecha.der{right:8px}
.lb-flecha svg{width:24px;height:24px}
.lb-pie{padding:10px 16px 16px;display:flex;gap:10px;align-items:center;justify-content:center;flex:none}
.lb-pie input{
  width:min(560px,80vw);height:38px;border-radius:9px;border:1px solid #2c313a;background:#16191e;
  color:#eef0f3;padding:0 12px;
}
.lb-pie input::placeholder{color:#6b7280}

/* ---------- cámara ---------- */
.camara{position:fixed;inset:0;z-index:96;background:#000;display:flex;flex-direction:column}
.camara video{flex:1;width:100%;height:100%;object-fit:cover}
.camara-barra{position:absolute;inset:auto 0 0 0;display:flex;align-items:center;justify-content:space-between;padding:18px 22px 26px;background:linear-gradient(to top,rgba(0,0,0,.7),transparent)}
.disparo{
  width:70px;height:70px;border-radius:50%;background:#fff;border:4px solid rgba(255,255,255,.35);
  display:grid;place-items:center;
}
.disparo::after{content:"";width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid #000}
.camara-barra button{background:transparent;border:0;color:#fff;font-size:13.5px;font-weight:600}
.camara-barra .cerrar{font-size:26px;line-height:1}

/* ---------- avisos ---------- */
.avisos{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.aviso{
  background:#1f2329;color:#fff;font-size:13.4px;font-weight:600;padding:9px 16px;border-radius:999px;
  box-shadow:0 8px 24px rgba(0,0,0,.28);animation:subir .16s ease-out;display:flex;align-items:center;gap:8px;
}
.aviso.malo{background:#a52f0b}
.aviso.bueno{background:#1d6b46}
.aviso svg{width:15px;height:15px}

/* ---------- arrastre ---------- */
.arrastre{
  position:fixed;inset:0;z-index:110;background:rgba(196,60,16,.10);
  border:3px dashed var(--rojo);display:grid;place-items:center;pointer-events:none;
}
.arrastre div{
  background:var(--rojo);color:#fff;padding:14px 26px;border-radius:12px;font-weight:700;
  box-shadow:0 10px 30px rgba(196,60,16,.4);
}

/* ---------- progreso ---------- */
.progreso{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:118;width:min(420px,90vw);
  background:#fff;border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra-alta);padding:11px 14px}
.progreso .txt{font-size:12.5px;font-weight:600;color:var(--tinta-suave);display:flex;justify-content:space-between;gap:10px}
.progreso .barra-fondo{height:6px;background:#eef0f3;border-radius:99px;margin-top:8px;overflow:hidden}
.progreso .barra-relleno{height:100%;width:0;background:var(--rojo);border-radius:99px;transition:width .2s}

/* ---------- informe ---------- */
.informe{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:34px 38px;box-shadow:var(--sombra);max-width:920px;margin:0 auto}
.informe-encabezado{border-bottom:2px solid var(--rojo);padding-bottom:14px;margin-bottom:20px;display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.informe-logo{height:76px;width:auto;margin-bottom:10px}
.informe-encabezado h2{font-size:20px;margin-bottom:4px}
.informe-encabezado .sub{font-size:13px;color:var(--gris)}
.informe-encabezado .logo{text-align:right;font-size:11px;color:var(--gris);letter-spacing:.05em;text-transform:uppercase;line-height:1.5}
.informe-encabezado .logo b{font-size:13px;letter-spacing:.16em;color:var(--tinta)}
.informe h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--rojo);margin:24px 0 10px;padding-bottom:5px;border-bottom:1px solid var(--linea)}
.tabla-informe{width:100%;border-collapse:collapse;font-size:13px}
.tabla-informe th{text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--gris);padding:6px 8px;border-bottom:1px solid var(--linea-fuerte)}
.tabla-informe td{padding:7px 8px;border-bottom:1px solid #f0f1f4;vertical-align:top}
.tabla-informe td.v{font-weight:700;white-space:nowrap}
.fotos-informe{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.foto-informe{border:1px solid var(--linea);border-radius:8px;overflow:hidden;break-inside:avoid}
.foto-informe img{width:100%;height:190px;object-fit:cover}
.foto-informe .p{padding:6px 9px;font-size:11.5px;line-height:1.35}
.foto-informe .p b{display:block;font-size:12px}
.foto-informe .p span{color:var(--gris)}

/* ---------- ubicación y mapas ---------- */
.ficha-datos .ubicacion{gap:7px;max-width:100%;min-width:0}
.ficha-datos .ubicacion a{
  color:var(--tinta-suave);border-bottom:1px dotted #c9ccd3;
  max-width:44ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ficha-datos .ubicacion a:hover{color:var(--rojo);border-bottom-color:var(--rojo)}
.chip-mapa{
  height:24px;padding:0 10px;border-radius:999px;border:1px solid var(--linea-fuerte);
  background:#fff;font-size:11.5px;font-weight:700;color:var(--rojo);letter-spacing:.02em;flex:none;
}
.chip-mapa:hover{background:var(--rojo-tenue);border-color:var(--rojo-claro)}

.fila-ubicacion{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:9px}
.estado-ubic{font-size:12px;color:var(--gris);display:flex;align-items:center;gap:6px;flex:1 1 140px;min-width:0;max-width:100%}
.estado-ubic.bueno{color:#1a7f52;font-weight:600}
.estado-ubic.malo{color:var(--rojo);font-weight:600}
.estado-ubic:has(.pegado-maps){flex:1 0 100%}
.pegado-maps{width:100%;max-width:100%;min-width:0;height:34px;border:1px solid var(--linea-fuerte);border-radius:9px;padding:0 11px;font-size:12.5px}

.modal-mapa{max-width:880px}
.mapa-dir{font-size:13.5px;color:var(--tinta-suave);margin-bottom:10px}
.mapa-marco{border:1px solid var(--linea);border-radius:12px;overflow:hidden;background:#eef0f3}
.mapa-marco iframe{display:block;width:100%;height:min(58vh,430px);border:0}
.mapa-nota{font-size:11.5px;color:var(--gris-claro);margin-top:8px}

/* ---------- calendario (Outlook / Teams) ---------- */
.fila-cal{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip-cal{
  display:inline-flex;align-items:center;gap:6px;background:#e9f6ee;color:#166b45;
  border:1px solid #cbe9d9;border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;
}
.chip-cal:hover{background:#ddf0e5;border-color:#b3ddc6}
.chip-cal svg{width:14px;height:14px;color:#1a7f52}
.pista-cal{font-size:12px;color:var(--gris)}
.ayuda-cal{font-size:12.5px;color:var(--tinta-suave);margin-bottom:14px;line-height:1.5}
.campo input:disabled{background:#f6f7f9;color:var(--gris)}

/* ---------- contacto del sitio ---------- */
.fila-contacto{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip-contacto{
  display:inline-flex;align-items:center;gap:6px;background:#f5f6f8;color:var(--tinta-suave);
  border:1px solid var(--linea);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;
}
.chip-contacto svg{width:14px;height:14px;color:var(--gris)}
.btn-wa{background:#e7f8ee;border-color:#c9ecd8;color:#0f7a40}
.btn-wa:hover{background:#d9f2e4;border-color:#a9dfc0}
.btn-wa svg{fill:currentColor;stroke:none;width:16px;height:16px}

/* ---------- varios ---------- */
.cargando{display:flex;align-items:center;justify-content:center;padding:70px 0;color:var(--gris);gap:10px;font-size:13.5px}
.girador{width:18px;height:18px;border:2.5px solid #dfe2e7;border-top-color:var(--rojo);border-radius:50%;animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.oculto{display:none !important}

/* ---------- acceso ---------- */
.pantalla-acceso{
  min-height:calc(100vh - var(--barra-alto) - 30px);
  display:grid;place-items:center;padding:10px;
}
.caja-acceso{
  width:100%;max-width:380px;background:#fff;border:1px solid var(--linea);
  border-radius:18px;box-shadow:0 18px 50px rgba(16,24,40,.10);
  padding:30px 28px 22px;text-align:center;
}
.logo-acceso{height:58px;width:auto;margin:0 auto 10px}
.caja-acceso h1{font-size:22px;letter-spacing:-.02em}
.sub-acceso{font-size:12.5px;color:var(--gris);margin-bottom:18px}
.caja-acceso .campo{text-align:left}
.aviso-acceso{font-size:13px;color:var(--tinta-suave);background:var(--rojo-tenue);border-radius:10px;padding:9px 12px;margin-bottom:14px}
.recordar{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tinta-suave);margin:2px 0 14px;text-align:left}
.recordar input{width:16px;height:16px;accent-color:var(--rojo)}
.btn-ancho{width:100%;justify-content:center}
.mensaje-acceso{font-size:12.5px;min-height:17px;margin-top:10px;color:var(--gris)}
.mensaje-acceso.malo{color:var(--rojo);font-weight:600}
.pie-acceso{font-size:11px;color:var(--gris-claro);margin-top:14px;border-top:1px solid var(--linea);padding-top:10px}

.btn-ms{
  background:#2f2f2f;border-color:#2f2f2f;color:#fff;height:42px;font-size:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.btn-ms:hover{background:#1f1f1f;border-color:#1f1f1f}
.btn-ms svg{width:18px;height:18px}
.separador-o{display:flex;align-items:center;gap:10px;margin:16px 0 14px;color:var(--gris-claro);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
.separador-o::before,.separador-o::after{content:"";flex:1;height:1px;background:var(--linea)}
.ms-codigo{background:#f7f8fa;border:1px solid var(--linea);border-radius:12px;padding:14px;margin:14px 0;font-size:13px;text-align:left;line-height:1.5}
.ms-codigo p{margin-bottom:6px}
.codigo-grande{
  font-family:"Consolas","Segoe UI Mono",monospace;font-size:26px;font-weight:700;
  letter-spacing:.14em;text-align:center;background:#fff;border:1px dashed var(--linea-fuerte);
  border-radius:10px;padding:10px 6px;margin:6px 0 10px;color:var(--tinta);
}
.ms-espera{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--gris)}

/* ---------- usuario en la barra ---------- */
.acciones-barra{display:flex;align-items:center;gap:8px}
.usuario{position:relative}
.chip-usuario{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 10px 0 6px;
  border:1px solid var(--linea-fuerte);border-radius:999px;background:#fff;font-size:13.5px;font-weight:600;
}
.chip-usuario:hover{background:#fafafa;border-color:#c3c7cf}
.chip-usuario svg{color:var(--gris-claro)}
.avatar{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--rojo-tenue);color:var(--rojo);font-size:11.5px;font-weight:700;letter-spacing:.02em;
}
.menu-usuario{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:230px;
  background:#fff;border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra-alta);
  padding:6px;display:flex;flex-direction:column;
}
.menu-cuenta{padding:9px 11px 10px;border-bottom:1px solid var(--linea);margin-bottom:6px}
.menu-cuenta strong{display:block;font-size:13.5px}
.menu-cuenta small{font-size:11.5px;color:var(--gris)}
.menu-usuario button,.menu-usuario a{
  display:block;width:100%;text-align:left;padding:9px 11px;border:0;background:transparent;
  border-radius:8px;font-size:13.5px;color:var(--tinta);text-decoration:none;font-weight:500;
}
.menu-usuario button:hover,.menu-usuario a:hover{background:#f3f4f6}
.menu-usuario .salir{color:var(--rojo);font-weight:600}

/* ---------- gestión de usuarios ---------- */
.lista-usuarios{display:flex;flex-direction:column}
.usuario-fila{display:flex;align-items:center;gap:12px;padding:12px 15px;border-bottom:1px solid #f0f1f4}
.usuario-fila:last-child{border-bottom:0}
.usuario-fila.inactivo{opacity:.55}
.usuario-fila .avatar{width:34px;height:34px;font-size:12.5px}
.datos-usuario{flex:1;min-width:0}
.nombre-usuario{font-weight:600;font-size:14px}
.soy-yo{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gris);background:#eef0f3;border-radius:999px;padding:2px 7px;margin-left:6px;vertical-align:2px}
.detalle-usuario{font-size:12.2px;color:var(--gris);margin-top:2px}
.acciones-usuario{display:flex;gap:4px;flex:none}
.nota-usuarios{font-size:12.5px;color:var(--gris);line-height:1.6;margin-top:14px}
.quien-creo{font-size:11.5px;color:var(--gris-claro);margin-top:8px}

/* ---------- móvil ---------- */
@media (max-width:720px){
  :root{--barra-alto:56px}
  .vista{padding:16px 14px 80px}
  .barra{padding:0 14px;gap:8px}
  .marca{gap:9px}
  .marca-logo{height:34px}
  .marca-separador{height:22px}
  .marca-texto strong{font-size:15px}
  .marca-texto small{display:none}
  .cabecera-seccion{flex-direction:column;align-items:stretch;gap:11px}
  .buscador input{width:100%}
  .ficha-datos .ubicacion a{max-width:100%}
  .campo.doble{grid-template-columns:1fr}
  .mapa-marco iframe{height:44vh}
  .modal-mapa{max-width:100%}
  .ficha-cabecera{padding:15px 15px}
  .ficha-titulo h1{font-size:19px}
  .ficha-datos{gap:4px 14px;font-size:12.8px}
  .pestanas{padding:3px;gap:2px}
  .pestana{padding:0 9px;font-size:12.3px;gap:5px;height:36px}
  .pestana svg{display:none}
  .pestana .num{min-width:17px;padding:0 5px}
  .herramientas .pista{display:none}
  .rejilla-fotos{grid-template-columns:repeat(2,1fr);gap:9px}
  .form-medida{grid-template-columns:1fr 1fr;padding:11px}
  .form-medida input:first-child{grid-column:1/-1}
  .medida{grid-template-columns:1fr auto;row-gap:6px}
  .medida .detalle{grid-column:1/-1}
  .medida .valor-caja{grid-column:1;grid-row:2;justify-self:start}
  .medida .acciones{grid-column:2;grid-row:1}
  .plano{flex-wrap:wrap}
  .plano-acciones{width:100%;justify-content:flex-end}
  .lb-cuerpo{padding:0 8px}
  .lb-flecha{width:38px;height:54px}
  .informe{padding:20px 16px}
  .fotos-informe{grid-template-columns:1fr}
  .btn .texto-largo{display:none}
}

/* ---------- pantallas táctiles: borrar siempre visible ---------- */
@media (hover:none){
  .foto .borrar{opacity:1}
  .medida .acciones{opacity:1}
}

/* ---------- impresión ---------- */
@media print{
  body{background:#fff;font-size:11.5pt}
  .barra,.pestanas,.herramientas,.volver,.no-imprimir,.avisos,.progreso{display:none !important}
  .vista{padding:0;max-width:none}
  .informe{border:0;box-shadow:none;padding:0;max-width:none;border-radius:0}
  .foto-informe img{height:200px}
  .foto-informe{page-break-inside:avoid}
  @page{margin:14mm}
}

/* ================= fase 1: alta de cuenta, estados y roles ================= */
.cambiar-acceso{margin:14px 0 0;font-size:12.5px;color:var(--gris);text-align:center}
.enlace{background:none;border:0;padding:0;color:var(--rojo);font:inherit;cursor:pointer;text-decoration:underline}
.enlace:hover{color:#9c3010}
.aviso-acceso{font-size:12.5px;line-height:1.5;color:var(--gris);background:var(--rojo-tenue);border-radius:var(--radio-sm);padding:10px 12px;margin:0 0 14px;text-align:center}
.acceso-aviso{text-align:center}
.acceso-aviso h2{font-size:18px;margin:8px 0 8px;color:var(--tinta)}
.acceso-aviso p{font-size:13px;line-height:1.65;color:var(--gris);margin:0 0 18px}
.icono-grande{font-size:34px;line-height:1}
.etiqueta{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.02em;vertical-align:middle}
.etiqueta.pendiente{background:#fff4e5;color:#8a5300;border:1px solid #f0d3a8}
.etiqueta.rechazado{background:#fdecea;color:#b3261e;border:1px solid #f5c6c2}
.mini-select{height:30px;border:1px solid var(--linea);border-radius:8px;background:#fff;color:var(--tinta);font:inherit;font-size:12px;padding:0 6px;max-width:158px;cursor:pointer}
.mini-select:hover{border-color:var(--linea-fuerte)}

/* ================= fase 1: teléfono, avisos de clave y errores ================= */
.fila-tel{display:grid;grid-template-columns:132px 1fr;gap:8px;align-items:center}
.fila-tel select{height:42px;border:1px solid var(--linea);border-radius:var(--radio-sm);background:#fff;
  font-family:inherit;font-size:12.5px;padding:0 4px;color:var(--tinta);cursor:pointer;width:100%}
.fila-tel select:hover{border-color:var(--linea-fuerte)}
.campo{position:relative;transition:margin-bottom .18s ease}
.campo-error input,.campo-error select,.campo-error textarea{border-color:#d33c3c;box-shadow:0 0 0 3px rgba(211,60,60,.12)}
.popover-clave{position:absolute;left:0;right:0;top:calc(100% - 4px);z-index:20;background:#fff;
  border:1px solid var(--linea-fuerte);border-radius:12px;box-shadow:var(--sombra-alta);padding:10px 13px}
.popover-clave .titulo-reglas{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gris-claro);margin-bottom:6px}
.popover-clave .regla{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--gris);padding:2px 0}
.popover-clave .regla .marca{width:13px;text-align:center;color:var(--gris-claro);font-weight:700}
.popover-clave .regla.bien{color:#15803d}
.popover-clave .regla.bien .marca{color:#15803d}

.campo.clave-abierta{margin-bottom:122px}

/* ================= fase 2: fotos, medidas y planos ================= */
.pestanas{display:flex;gap:6px;margin:0 0 16px;border-bottom:1px solid var(--linea);padding-bottom:0}
.pestana{display:flex;align-items:center;gap:7px;background:none;border:0;border-bottom:2px solid transparent;
  padding:9px 12px 10px;color:var(--gris);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;margin-bottom:-1px}
.pestana svg{width:16px;height:16px;opacity:.8}
.pestana em{font-style:normal;font-size:11.5px;font-weight:700;background:#eef0f3;color:var(--gris);
  border-radius:999px;padding:1px 7px;min-width:20px;text-align:center}
.pestana:hover{color:var(--tinta)}
.pestana.activa{color:var(--rojo);border-bottom-color:var(--rojo)}
.pestana.activa svg{opacity:1}
.pestana.activa em{background:var(--rojo-tenue);color:var(--rojo)}
.panel-pestana{min-height:120px}

.zona-subida{display:grid;justify-items:center;gap:4px;border:1.5px dashed var(--linea-fuerte);border-radius:var(--radio);
  background:#fbfbfc;padding:20px 16px;cursor:pointer;text-align:center;margin-bottom:16px;transition:border-color .15s,background .15s}
.zona-subida:hover{border-color:var(--rojo);background:var(--rojo-tenue)}
.zona-subida svg{width:26px;height:26px;color:var(--rojo);margin-bottom:2px}
.zona-subida strong{font-size:14px;color:var(--tinta)}
.zona-subida span{font-size:12.5px;color:var(--gris)}
.zona-subida.subiendo{opacity:.6;pointer-events:none}

.rejilla-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.foto-item{position:relative;margin:0;border:1px solid var(--linea);border-radius:var(--radio-sm);overflow:hidden;
  background:#fff;cursor:zoom-in;box-shadow:var(--sombra)}
.foto-item img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#eef0f3}
.foto-item figcaption{font-size:11.5px;color:var(--gris);padding:6px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foto-borrar{position:absolute;top:6px;right:6px;width:26px;height:26px;display:grid;place-items:center;
  border:0;border-radius:8px;background:rgba(23,26,31,.62);color:#fff;cursor:pointer;opacity:0;transition:opacity .15s}
.foto-borrar svg{width:14px;height:14px}
.foto-item:hover .foto-borrar{opacity:1}

.visor{position:fixed;inset:0;background:rgba(12,14,18,.92);display:grid;place-items:center;z-index:80;padding:20px}
.visor-caja{max-width:min(1100px,100%);max-height:100%;display:grid;gap:10px;justify-items:center;position:relative}
.visor-caja img{max-width:100%;max-height:calc(100vh - 130px);border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.visor-pie{color:#e7e9ee;font-size:12.5px;text-align:center;display:grid;gap:2px}
.visor-pie strong{font-size:13.5px;font-weight:600}
.visor-cerrar{position:absolute;top:-6px;right:-6px;width:34px;height:34px;border:0;border-radius:10px;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:grid;place-items:center}
.visor-cerrar svg{width:18px;height:18px}

.medida-form{background:#fbfbfc;border:1px solid var(--linea);border-radius:var(--radio-sm);padding:14px;margin-bottom:16px}
.campos-medida{display:grid;grid-template-columns:1fr 90px 90px;gap:10px}
.campos-medida label{font-size:12.5px;font-weight:600;color:var(--tinta-suave);margin-bottom:4px;display:block}
.campos-medida input{width:100%;height:40px;border:1px solid var(--linea);border-radius:var(--radio-sm);
  padding:0 11px;font:inherit;font-size:13.5px;background:#fff;color:var(--tinta)}
.campos-medida input:focus{border-color:var(--rojo);outline:none;box-shadow:0 0 0 3px rgba(196,60,16,.12)}
.fila-medida-acciones{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px;align-items:center}
.nota-medida{flex:1;border:1px solid var(--linea);border-radius:var(--radio-sm);padding:0 11px;height:40px;font:inherit;font-size:13.5px;background:#fff}
.tabla-medidas{border:1px solid var(--linea);border-radius:var(--radio-sm);overflow:hidden;background:#fff}
.fila-encabezado,.fila-medida{display:grid;grid-template-columns:1.4fr .9fr 1.4fr 40px;gap:10px;align-items:center;padding:9px 12px}
.fila-encabezado{background:#f7f8fa;font-size:11.5px;font-weight:700;color:var(--gris);text-transform:uppercase;letter-spacing:.03em}
.fila-medida{border-top:1px solid var(--linea);font-size:13.5px}
.nombre-medida{font-weight:600;color:var(--tinta)}
.valor-medida{font-variant-numeric:tabular-nums;color:var(--tinta)}
.valor-medida em{font-style:normal;color:var(--gris);font-size:12px}
.nota-medida-texto{color:var(--gris);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.lista-planos{display:grid;gap:8px}
.plano-fila{display:flex;align-items:center;gap:12px;border:1px solid var(--linea);border-radius:var(--radio-sm);
  background:#fff;padding:10px 12px}
.icono-plano{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--rojo-tenue);color:var(--rojo);flex:none}
.icono-plano svg{width:18px;height:18px}
.datos-plano{flex:1;min-width:0}
.datos-plano a{font-size:13.5px;font-weight:600;color:var(--tinta);text-decoration:none}
.datos-plano a:hover{color:var(--rojo);text-decoration:underline}
.datos-plano small{display:block;font-size:11.5px;color:var(--gris)}

/* ---------- videos ---------- */
.lista-videos{display:grid;gap:10px}
.video-fila{display:flex;align-items:center;gap:12px;border:1px solid var(--linea);border-radius:var(--radio-sm);
  background:#fff;padding:10px 12px}
.video-fila video{width:150px;height:84px;flex:none;border-radius:8px;background:#0d0f13;object-fit:cover}
.datos-video{flex:1;min-width:0}
.datos-video b{display:block;font-size:13.5px;font-weight:600;color:var(--tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.datos-video small{display:block;font-size:11.5px;color:var(--gris)}
.enlace-chico{display:inline-block;margin-top:3px;font-size:12px;font-weight:600;color:var(--rojo)}
@media (max-width:520px){
  .video-fila{flex-wrap:wrap}
  .video-fila video{width:100%;height:180px}
}

/* ---------- descargar fotos ---------- */
.fila-acciones-fotos{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.fila-acciones-fotos .pista{font-size:12px;color:var(--gris)}

/* ---------- acciones de la ficha (que no se salgan en el móvil) ---------- */
.ficha-titulo{flex-wrap:wrap}
.ficha-acciones{display:flex;gap:6px;flex:none;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:720px){
  .ficha-acciones{width:100%;justify-content:flex-start}
  .ficha-acciones .btn{flex:0 0 auto;white-space:nowrap}
  .ficha-acciones .btn-icono{flex:0 0 auto}
}

/* ---------- ponerle nombre a la foto ---------- */
.visor-editar{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:4px;width:min(560px,100%)}
.visor-editar input{
  flex:1;min-width:0;height:34px;padding:0 10px;border-radius:9px;border:1px solid #3a3f48;
  background:#1b1e24;color:#eef0f4;font-size:13px;
}
.visor-editar input::placeholder{color:#7c838f}
.visor-acciones{display:flex;gap:8px;justify-content:center;margin-top:6px}

/* ---------- opciones de una ventana (calendario) ---------- */
.opcion{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:#fff;
  border:1px solid var(--linea);border-radius:var(--radio-sm);padding:11px 12px;cursor:pointer;font:inherit}
.opcion + .opcion{margin-top:8px}
.opcion:hover{border-color:var(--rojo);background:var(--rojo-tenue)}
.opcion b{display:block;font-size:14px;color:var(--tinta)}
.opcion small{display:block;font-size:12px;color:var(--gris);line-height:1.35;margin-top:2px}

/* la unidad de la medida siempre en minúsculas */
.medida-form input[name=unidad]{text-transform:lowercase}

@media (max-width:640px){
  .rejilla-fotos{grid-template-columns:repeat(2,1fr);gap:9px}
  .campos-medida{grid-template-columns:1fr 80px 80px}
  .fila-encabezado{display:none}
  .fila-medida{grid-template-columns:1fr auto;row-gap:2px}
  .nota-medida-texto{grid-column:1 / -1;white-space:normal}
  .pestana{padding:9px 9px 10px;font-size:12.5px}
  .pestana em{display:none}
}
/* ================= fase 3: informe ================= */
.herramientas{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.informe-datos{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-bottom:6px}
.informe-datos div{display:grid;gap:2px}
.informe-datos span{font-size:11px;color:var(--gris);text-transform:uppercase;letter-spacing:.04em}
.informe-datos strong{font-size:13.5px;font-weight:600;color:var(--tinta)}
.informe-notas{font-size:13.5px;line-height:1.6;color:var(--tinta-suave);white-space:pre-wrap;margin:0}
.informe-fotos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.informe-planos{margin:0;padding-left:18px;font-size:13px;line-height:1.7;color:var(--tinta-suave)}
.informe-pie{display:flex;justify-content:space-between;gap:12px;margin-top:28px;padding-top:12px;
  border-top:1px solid var(--linea);font-size:11px;color:var(--gris-claro)}

@media (max-width:640px){
  .informe-datos{grid-template-columns:1fr}
  .informe-fotos{grid-template-columns:1fr}
  .herramientas{flex-wrap:wrap}
}

@media print{
  .herramientas{display:none !important}
  .informe-datos span{color:#555}
  .informe-pie{border-top:1px solid #bbb}
  .informe-fotos{grid-template-columns:1fr 1fr}
}
/* ================= fase 3: franja de sin conexión ================= */
.franja-offline{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  background:#fff4e5;border-bottom:1px solid #f0d3a8;color:#8a5300;
  padding:8px 14px;font-size:13px;position:sticky;top:var(--barra-alto);z-index:30}
.franja-offline b{font-weight:700}
.franja-offline .btn-chico{height:30px;padding:0 12px;font-size:12.5px;background:#fff;border:1px solid #f0d3a8;color:#8a5300}
.franja-offline .btn-chico:hover{background:#fffaf2}

@media print{ .franja-offline{display:none !important} }

/* ================= fase 3: mapa, calendario y papelera ================= */
.fila-coords{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center}
.etiqueta-estado{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.01em}
.etiqueta-estado.abierta{background:#e8f5ec;color:#15803d}
.etiqueta-estado.cerrada{background:#eef0f3;color:#4b5563}
.etiqueta-estado.pendiente{background:#fff4e5;color:#8a5300}
.mapa-ficha{margin-top:14px;border:1px solid var(--linea);border-radius:var(--radio-sm);overflow:hidden;background:#fff}
.mapa-ficha iframe{display:block;width:100%;height:240px;border:0}
.mapa-pie{font-size:11.5px;color:var(--gris);padding:6px 10px;border-top:1px solid var(--linea);background:#fbfbfc}
/* el mapa no se carga solo: hasta que se toca «Ver mapa» no hay iframe */
.mapa-aviso{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px}
.mapa-aviso span{font-size:12.5px;color:var(--gris)}
.mapa-cargado{position:relative}
.mapa-cerrar{position:absolute;right:8px;top:8px;background:#fff;border:1px solid var(--linea);box-shadow:var(--sombra)}
.mapa-cerrar svg{width:13px;height:13px}

@media (max-width:640px){
  .fila-coords{grid-template-columns:1fr 1fr}
  .fila-coords .btn{grid-column:1 / -1}
  .mapa-ficha iframe{height:200px}
  .mapa-aviso{justify-content:center}
}

@media print{ .mapa-ficha{display:none} }

/* ---------- menú principal (las secciones) ---------- */
.menu-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.menu-tarjeta{
  position:relative;display:flex;flex-direction:column;gap:10px;
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:16px;box-shadow:var(--sombra);color:inherit;
  transition:box-shadow .18s,transform .18s,border-color .18s;
}
.menu-tarjeta:hover{box-shadow:var(--sombra-alta);transform:translateY(-2px);border-color:#d8dbe1}
.menu-icono{
  width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:rgba(196,60,16,.09);color:var(--rojo);
}
.menu-icono svg{width:22px;height:22px}
.menu-cuerpo{display:flex;flex-direction:column;gap:3px;min-width:0}
.menu-nombre{font-weight:700;font-size:15.5px;line-height:1.2}
.menu-texto{color:var(--gris);font-size:12.5px;line-height:1.4}
.menu-dato{margin-top:6px;font-size:12.5px;font-weight:600;color:var(--rojo)}
.menu-pronto{
  position:absolute;top:14px;right:14px;font-size:10px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:#8a6d00;background:#fff5d6;border:1px solid #f0dda0;
  border-radius:999px;padding:2px 8px;
}
@media (max-width:640px){
  /* en el móvil, lista de renglones: se lee de un vistazo y no hay que desplazar tanto */
  .menu-rejilla{grid-template-columns:1fr;gap:9px}
  .menu-tarjeta{flex-direction:row;align-items:center;gap:12px;padding:12px 14px}
  .menu-icono{width:36px;height:36px;border-radius:10px}
  .menu-icono svg{width:19px;height:19px}
  .menu-pronto{position:static;margin-left:auto;align-self:center}
  .menu-dato{margin-top:2px}
}

/* ---------- barra en teléfonos: que nada se monte ---------- */
@media (max-width:600px){
  /* se queda el logo, la acción (Nuevo servicio) y el avatar; el nombre sale al abrir el menú */
  .marca-texto,.marca-separador{display:none}
  .usuario-nombre{display:none}
  .chip-usuario{padding:0 8px 0 5px}
}

/* ================= hoja membretada del informe =================
   La hoja entera va como FONDO de la página (la imagen tal cual, sin
   recortarla): cabecera, marca de agua y pie de una sola pieza.
   Al imprimir va con position:fixed, que es lo único que Chrome repite
   en TODAS las páginas; --arriba y --abajo (que pone app.js en mm) solo
   sirven para que el texto no se meta debajo del logo ni del pie. */
.hoja{position:relative;width:100%;max-width:920px;background:#fff;border:1px solid var(--linea);
  border-radius:var(--radio);box-shadow:var(--sombra);overflow:hidden}
.hoja-fondo{position:absolute;inset:0;z-index:0;line-height:0}
.hoja-fondo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top}
.hoja-cuerpo{position:relative;z-index:1;padding:calc(var(--arriba, 36mm) + 2mm) 0 calc(var(--abajo, 30mm) + 6mm)}
.hoja-cuerpo .informe{border:0;border-radius:0;box-shadow:none;max-width:none;padding:0 38px}

/* elegir la hoja membretada */
.elige-fondo{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--gris);font-weight:600}
.elige-fondo select{height:34px;border-radius:9px;border:1px solid var(--linea-fuerte);background:#fff;
  padding:0 8px;font:inherit;font-weight:500;color:var(--tinta)}

/* respuestas a las preguntas, dentro del informe */
.informe-respuestas{margin:0}
.informe-respuestas dt{font-weight:600;color:var(--tinta);font-size:13px;margin-top:9px}
.informe-respuestas dt:first-child{margin-top:0}
.informe-respuestas dd{margin:2px 0 0;color:var(--tinta-suave);font-size:13px;line-height:1.5;white-space:pre-wrap}

/* la foto entera, sin recortar */
.foto-informe img{object-fit:contain;background:#f4f5f7}

/* ---------- impresión del informe ---------- */
@media print{
  /* margen de página en cero: así la imagen de fondo cubre la hoja entera
     (con margen de página Chrome la recorta). El hueco del logo y del pie
     se hace con relleno, más abajo. */
  @page{size:letter;margin:0}
  html,body{background:#fff !important}
  .vista{padding:0 !important;max-width:none}
  .hoja{border:0;border-radius:0;box-shadow:none;max-width:none;width:100%;overflow:visible}
  /* la hoja entera, clavada detrás del texto y repetida en cada página */
  .hoja-fondo{position:fixed;top:0;left:0;right:0;bottom:0;z-index:0}
  .hoja-fondo img{object-fit:fill}
  .hoja-cuerpo{padding:calc(var(--arriba, 36mm) + 2.5mm) 0 var(--abajo, 30mm)}
  .hoja-cuerpo .informe{padding:0 17mm}
  /* más apretado que en pantalla, para que quepa en una hoja */
  .informe-fotos{grid-template-columns:1fr 1fr;gap:9px}
  .foto-informe img{height:118px}
  /* con más de 4 fotos van de 3 en fondo: así caben en una hoja */
  .informe-fotos.muchas{grid-template-columns:repeat(3,1fr);gap:8px}
  .informe-fotos.muchas .foto-informe img{height:92px}
  .informe-fotos.muchas .foto-informe .p{font-size:10.5px;padding:4px 7px}
  .informe h3{margin:11px 0 6px}
  .informe-datos{gap:8px 22px}
  .informe-pie{margin-top:16px}
  .foto-informe{break-inside:avoid;page-break-inside:avoid}
  .tabla-informe tr{break-inside:avoid}
  .informe-planos{break-inside:avoid}
  .informe-pie{break-inside:avoid}
  .informe h3{break-after:avoid}
  .informe-respuestas dt{break-after:avoid}
}

/* ---------- preguntas del servicio ---------- */
.panel-preguntas{display:grid;gap:14px}
.pregunta{display:grid;gap:5px}
.pregunta label{font-size:13.5px;font-weight:600;color:var(--tinta);line-height:1.4}
.pregunta textarea{
  width:100%;min-height:58px;padding:9px 11px;border-radius:10px;
  border:1px solid var(--linea-fuerte);font:inherit;font-size:13.5px;
  resize:vertical;background:#fff;color:var(--tinta);
}
.pregunta textarea:focus{outline:none;border-color:var(--rojo)}
.pregunta textarea[readonly]{background:#f7f8fa;color:var(--tinta-suave)}
.fila-guardar{display:flex;justify-content:flex-end}

/* etiqueta de los planos en DWG */
.etiqueta-dwg{font-size:10px;font-weight:700;color:#8a6d00;background:#fff5d6;
  border:1px solid #f0dda0;border-radius:999px;padding:1px 6px;margin-left:4px}

/* ---------- hojas membretadas (Administración) ---------- */
.titulo-panel{font-size:15px;margin:0 0 6px}
.lista-hojas{display:grid;gap:8px}
.hoja-fila{display:flex;align-items:center;gap:12px;border:1px solid var(--linea);
  border-radius:var(--radio-sm);background:#fff;padding:8px 12px}
.hoja-mini{width:56px;height:72px;object-fit:cover;border-radius:6px;border:1px solid var(--linea);flex:none;background:#fff}
.datos-hoja{flex:1;min-width:0}
.datos-hoja b{display:block;font-size:13.5px}
.datos-hoja small{display:block;font-size:11.5px;color:var(--gris)}
.alta-hoja{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:10px}
.alta-hoja > div{display:grid;gap:4px;flex:1;min-width:190px}
.alta-hoja label{font-size:12.5px;font-weight:600;color:var(--gris)}
.alta-hoja input{height:36px;border-radius:9px;border:1px solid var(--linea-fuerte);padding:0 10px;font:inherit;background:#fff}
.alta-hoja input[type=file]{padding:6px 8px;height:auto}

/* folio del servicio (IV-001, IM-002…) */
.folio-chip{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;letter-spacing:.03em;
  color:var(--tinta);background:#eef0f4;border:1px solid var(--linea-fuerte);border-radius:6px;padding:1px 6px}
.folio-mini{font-size:11px;font-weight:700;color:var(--gris);letter-spacing:.03em}

/* folio encima de la portada de la tarjeta (a la derecha, la fecha va a la izquierda) */
.folio-chip.en-portada{
  position:absolute;top:10px;right:10px;z-index:1;
  background:rgba(255,255,255,.92);border-color:rgba(0,0,0,.06);
  backdrop-filter:blur(4px);box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.tarjeta-meta .etiqueta-estado{font-size:10.5px;padding:1px 8px}
.tarjeta-tipo{font-weight:600;color:var(--tinta-suave)}

/* =========================================================
   ÓRDENES DE COMPRA (OC)
   Mismas piezas que el resto de la app: gris recibida, ámbar en
   revisión o corrección pedida, verde aprobada y roja rechazada.
   ========================================================= */

/* botones que estrena esta pantalla */
.btn-grande{height:46px;padding:0 20px;font-size:15px;border-radius:11px}
.btn-verde{background:#15803d;border-color:#15803d;color:#fff;box-shadow:0 2px 6px rgba(21,128,61,.22)}
.btn-verde:hover{background:#116b32;border-color:#116b32}
.btn-ambar{background:#8a5300;border-color:#8a5300;color:#fff;box-shadow:0 2px 6px rgba(138,83,0,.2)}
.btn-ambar:hover{background:#744600;border-color:#744600}

/* avisos de la pantalla (sin conexión, módulo que falta, orden cerrada) */
.oc-aviso{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff4e5;border:1px solid #f0d3a8;border-radius:12px;
  color:#8a5300;font-size:13px;line-height:1.45;padding:10px 13px;margin:0 0 14px;
}
.oc-aviso svg{width:17px;height:17px;flex:none}
.oc-aviso span{flex:1;min-width:180px}
.oc-aviso.malo{background:#fdecea;border-color:#f5c6c2;color:#b3261e}
.oc-aviso .btn-chico{background:#fff;border-color:currentColor;color:inherit;flex:none}

/* contadores por estado */
.oc-contadores{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.oc-contador{
  display:grid;gap:1px;background:#fff;border:1px solid var(--linea);border-left:4px solid var(--linea-fuerte);
  border-radius:12px;padding:11px 14px;box-shadow:var(--sombra);
}
.oc-contador .etq{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gris)}
.oc-contador .nro{font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.oc-contador .pie{font-size:11.5px;color:var(--gris)}
.oc-contador.oc-c-recibida{border-left-color:#9aa5b1}
.oc-contador.oc-c-en-revision{border-left-color:#d69a2d}
.oc-contador.oc-c-aprobada{border-left-color:#2f9e5f}

/* buscador y filtros */
.oc-filtros{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.oc-buscador{flex:1 1 280px;min-width:0}
.oc-buscador input{width:100%}
.oc-botones-filtro{display:flex;gap:6px;flex-wrap:wrap}
.oc-filtro{
  height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--linea-fuerte);
  background:#fff;font-size:13px;font-weight:600;color:var(--tinta-suave);
}
.oc-filtro:hover{background:#f7f8fa;color:var(--tinta)}
.oc-filtro.activo{background:var(--rojo-tenue);border-color:#efbfae;color:#96290a}

/* la tabla de la lista */
.oc-tabla-caja{overflow-x:auto;border:1px solid var(--linea);border-radius:12px;background:#fff;box-shadow:var(--sombra)}
table.oc-tabla{width:100%;border-collapse:collapse;font-size:13.5px;min-width:860px}
table.oc-tabla th{
  text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--gris);
  font-weight:700;padding:10px 12px;border-bottom:1px solid var(--linea-fuerte);
  background:#fafbfc;white-space:nowrap;
}
table.oc-tabla th.der,table.oc-tabla td.der{text-align:right}
table.oc-tabla td{padding:11px 12px;border-bottom:1px solid #f0f1f4;vertical-align:middle}
table.oc-tabla tr:last-child td{border-bottom:0}
table.oc-tabla tbody tr:hover{background:#fcfcfd}
.oc-c-folio{font-weight:700;white-space:nowrap}
.oc-c-occli,.oc-c-presupuesto{color:var(--tinta-suave);font-variant-numeric:tabular-nums;white-space:nowrap}
.oc-c-monto{white-space:nowrap;font-variant-numeric:tabular-nums}
.oc-c-monto .oc-monto{font-weight:700}
.oc-c-monto small{font-size:10.5px;font-weight:700;color:var(--gris)}
.oc-c-fecha{white-space:nowrap;color:var(--tinta-suave)}
.oc-c-accion{text-align:right}
.enlace-ver{font-weight:700;font-size:13px;color:var(--rojo)}
.oc-pie-tabla{font-size:12px;color:var(--gris);margin-top:10px;line-height:1.5}

/* etiquetas de estado de la orden */
.chip-oc{
  display:inline-block;padding:3px 10px;border-radius:999px;border:1px solid transparent;
  font-size:11.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
}
.chip-oc.recibida{background:#eef0f3;color:#4b5563;border-color:#dde1e7}
.chip-oc.revision,.chip-oc.correccion{background:#fff4e5;color:#8a5300;border-color:#f0d3a8}
.chip-oc.aprobada{background:#e8f5ec;color:#15803d;border-color:#bfe3cd}
.chip-oc.rechazada{background:#fdecea;color:#b3261e;border-color:#f5c6c2}
.oc-ligada{
  font-size:11.5px;font-weight:700;color:var(--tinta-suave);
  background:#eef0f4;border:1px solid var(--linea-fuerte);border-radius:999px;padding:2px 9px;
}

/* formulario del alta */
.oc-bloque{background:#fafbfc;border:1px solid var(--linea);border-radius:12px;padding:15px 16px 4px;margin-bottom:16px}
.oc-bloque-titulo{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.oc-bloque-titulo h3{font-size:16px}
.oc-bloque-titulo .pista{font-size:12.5px;color:var(--gris)}
.oc-ayuda{font-size:12.5px;color:var(--tinta-suave);line-height:1.5;margin:6px 0 12px}
.oc-separador{display:flex;align-items:center;gap:12px;margin:4px 0 16px;color:var(--gris);font-size:12.5px}
.oc-separador::before,.oc-separador::after{content:"";height:1px;background:var(--linea);flex:1}
.oc-campos{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.oc-campos .campo.ancho{grid-column:1/-1}
.oc-campos .campo label .req{color:var(--rojo);margin-left:2px}
.oc-monedas{display:flex;gap:8px}
.oc-moneda{
  height:42px;padding:0 18px;border-radius:10px;border:1px solid var(--linea-fuerte);
  background:#fff;font-size:14px;font-weight:700;color:var(--tinta-suave);
}
.oc-moneda.activa{background:var(--rojo-tenue);border-color:#efbfae;color:#96290a}
.oc-zona-archivo{
  display:grid;justify-items:center;gap:5px;border:2px dashed var(--linea-fuerte);border-radius:12px;
  background:#fbfcfd;padding:20px 16px;text-align:center;margin:6px 0 16px;cursor:pointer;
  transition:border-color .15s,background .15s;
}
.oc-zona-archivo:hover,.oc-zona-archivo:focus-visible{border-color:var(--rojo);background:var(--rojo-tenue);outline:none}
.oc-zona-archivo.soltar{border-color:var(--rojo);background:var(--rojo-tenue)}
.oc-zona-archivo strong{font-size:14px;color:var(--tinta)}
.oc-zona-archivo span{font-size:12.5px;color:var(--gris);overflow-wrap:anywhere}
.oc-zona-archivo .btn{margin-top:4px}
.oc-zona-archivo.con-archivo{border-style:solid;border-color:#bfe3cd;background:#f4fbf7}
.oc-hoja{
  width:34px;height:42px;border-radius:4px;background:var(--rojo-tenue);border:1.5px solid #efbfae;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;
  font-size:9px;font-weight:800;letter-spacing:.03em;color:#96290a;flex:none;
}
.oc-error{
  margin:0 0 12px;background:#fdecea;border:1px solid #f5c6c2;border-radius:10px;
  color:#b3261e;font-size:13px;font-weight:600;line-height:1.45;padding:10px 13px;
}
.oc-acciones-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--linea);padding-top:14px}
.oc-acciones-form .oc-ayuda{margin:0 auto 0 0;font-size:12px;color:var(--gris)}

/* ficha de la orden */
.oc-ficha-cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:2px}
.oc-ficha-izquierda{min-width:0}
.oc-ficha-titulo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.oc-ficha-titulo h1{font-size:26px;letter-spacing:-.02em}
.oc-ficha-acciones{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.oc-ficha-sub{font-size:13px;color:var(--gris);margin:2px 0 14px}
.oc-datos{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin:0 0 16px}
.oc-dato{display:grid;gap:2px;padding:9px 0;border-bottom:1px solid #f0f1f4;min-width:0}
.oc-dato .etq{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gris)}
.oc-dato .val{font-size:14.5px;font-weight:600;overflow-wrap:anywhere}
.oc-dato .val.suave{font-weight:500;color:var(--tinta-suave)}
.oc-dos-columnas{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start;margin-top:4px}
.oc-subtitulo{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gris);margin:0 0 8px}
.oc-dos-columnas .oc-subtitulo:not(:first-child){margin-top:18px}
.oc-adjunto{
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  border:1px solid var(--linea);border-radius:12px;background:#fbfcfd;padding:13px 14px;
}
.oc-adjunto-datos{flex:1;min-width:140px}
.oc-adjunto-datos .nombre{font-size:14px;font-weight:700;overflow-wrap:anywhere}
.oc-adjunto-datos .peso{font-size:12px;color:var(--gris);margin-top:1px}
.oc-adjunto.vacio{background:#fff}
.oc-caja-notas{
  border:1px solid var(--linea);border-radius:12px;background:#fff;padding:12px 14px;
  font-size:13.5px;color:var(--tinta-suave);min-height:80px;white-space:pre-wrap;line-height:1.55;
}
.oc-linea-tiempo{list-style:none;margin:0;padding:0}
.oc-linea-tiempo li{display:flex;gap:11px;padding:0 0 16px;position:relative}
.oc-linea-tiempo li:last-child{padding-bottom:0}
.oc-linea-tiempo li::before{content:"";position:absolute;left:5px;top:16px;bottom:0;width:2px;background:var(--linea)}
.oc-linea-tiempo li:last-child::before{display:none}
.oc-linea-tiempo .punto{
  flex:none;width:12px;height:12px;border-radius:50%;margin-top:4px;position:relative;z-index:1;
  background:#fff;border:2px solid var(--linea-fuerte);
}
.oc-linea-tiempo .punto.recibida{background:#9aa5b1;border-color:#9aa5b1}
.oc-linea-tiempo .punto.revision,.oc-linea-tiempo .punto.correccion{background:#d69a2d;border-color:#d69a2d}
.oc-linea-tiempo .punto.aprobada{background:#2f9e5f;border-color:#2f9e5f}
.oc-linea-tiempo .punto.rechazada{background:#b3261e;border-color:#b3261e}
.oc-linea-tiempo strong{display:block;font-size:13.5px}
.oc-linea-tiempo .cuando{display:block;font-size:12px;color:var(--gris);margin-top:1px}
.oc-linea-tiempo .nota{display:block;font-size:12.5px;color:var(--tinta-suave);margin-top:4px;line-height:1.45;overflow-wrap:anywhere}

/* revisión */
.oc-resumen{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  background:#fbfcfd;border:1px solid var(--linea);border-radius:12px;padding:13px 15px;margin-bottom:12px;
}
.oc-resumen .etq{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gris)}
.oc-resumen .val{display:block;font-size:14px;font-weight:700;margin-top:1px;overflow-wrap:anywhere}
.oc-obra-revision{font-size:13px;color:var(--tinta-suave);line-height:1.5;margin:0 0 16px}
.oc-nota-zona label{display:block;font-size:12.5px;font-weight:700;color:var(--tinta-suave);margin-bottom:5px}
.oc-nota-zona textarea{
  width:100%;min-height:96px;padding:10px 12px;border-radius:10px;resize:vertical;
  border:1px solid var(--linea-fuerte);background:#fff;font:inherit;font-size:14px;line-height:1.5;color:var(--tinta);
}
.oc-nota-zona textarea:focus{outline:2px solid rgba(196,60,16,.16);border-color:var(--rojo-claro)}
.oc-nota-zona .ayuda{font-size:12px;color:var(--gris);margin-top:5px}
.oc-acciones-revision{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.oc-accion{border:1px solid var(--linea);border-radius:12px;background:#fff;padding:13px 14px;box-shadow:var(--sombra)}
.oc-accion .btn{width:100%;justify-content:center}
.oc-accion p{font-size:12.5px;color:var(--tinta-suave);line-height:1.45;margin-top:9px}

/* ---------- pantalla angosta: la tabla se vuelve tarjetas ---------- */
@media (max-width:860px){
  .oc-dos-columnas{grid-template-columns:1fr}
  .oc-resumen{grid-template-columns:1fr 1fr}
  .oc-acciones-revision{grid-template-columns:1fr}
}
@media (max-width:760px){
  .oc-tabla-caja{overflow:visible;border:0;background:transparent;box-shadow:none}
  table.oc-tabla{display:block;min-width:0;font-size:13.5px}
  table.oc-tabla thead{display:none}
  table.oc-tabla tbody{display:block}
  table.oc-tabla tr{
    display:grid;grid-template-columns:1fr auto;gap:3px 10px;
    background:#fff;border:1px solid var(--linea);border-radius:12px;
    padding:12px 13px;margin:0 0 10px;box-shadow:var(--sombra);
  }
  table.oc-tabla td{display:block;padding:0;border:0;grid-column:1/-1;min-width:0;overflow-wrap:anywhere}
  table.oc-tabla td.der{text-align:left}
  table.oc-tabla td[data-etq]::before{
    content:attr(data-etq);display:block;
    font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:var(--gris-claro);margin-bottom:1px;
  }
  table.oc-tabla td.oc-c-folio{grid-column:1;grid-row:1;font-size:16px;font-weight:700}
  table.oc-tabla td.oc-c-estado{grid-column:2;grid-row:1;justify-self:end;align-self:start;text-align:right;margin-top:0}
  table.oc-tabla td.oc-c-occli,table.oc-tabla td.oc-c-cliente,
  table.oc-tabla td.oc-c-presupuesto,table.oc-tabla td.oc-c-fecha,table.oc-tabla td.oc-c-monto{grid-column:1/-1}
  table.oc-tabla td.oc-c-monto{font-size:16px;margin-top:2px}
  table.oc-tabla td.oc-c-accion{grid-column:1/-1;margin-top:6px}
  table.oc-tabla td.oc-c-accion .enlace-ver{
    display:block;text-align:center;padding:10px;border:1px solid var(--linea-fuerte);
    border-radius:10px;font-size:14px;
  }
  .oc-ficha-cabeza{flex-direction:column;align-items:stretch}
  .oc-ficha-titulo h1{font-size:22px}
  .oc-ficha-acciones{justify-content:stretch}
  .oc-ficha-acciones .btn{flex:1 1 100%;justify-content:center;height:46px}
}
@media (max-width:700px){
  .oc-contadores{grid-template-columns:1fr}
  .oc-campos{grid-template-columns:1fr}
  .oc-datos{grid-template-columns:1fr}
  .oc-resumen{grid-template-columns:1fr}
  .oc-filtros{flex-direction:column;align-items:stretch}
  .oc-buscador{flex:1 1 auto;min-width:0}
  /* los filtros se deslizan de lado dentro de su renglón: nunca ensanchan la página */
  .oc-botones-filtro{
    overflow-x:auto;flex-wrap:nowrap;min-width:0;max-width:100%;
    padding-bottom:3px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .oc-botones-filtro::-webkit-scrollbar{display:none}
  .oc-filtro{flex:0 0 auto}
  /* el botón principal, grande y al alcance del dedo */
  .oc-principal{width:100%;height:52px;font-size:16px;justify-content:center}
  .oc-acciones-form{flex-direction:column;align-items:stretch}
  .oc-acciones-form .oc-ayuda{order:3;margin:0;text-align:center}
  .oc-acciones-form .btn{width:100%;height:50px;font-size:15px}
  .oc-moneda{flex:1}
  .oc-zona-archivo{padding:16px 12px}
  .oc-adjunto{padding:12px}
  .oc-adjunto .abrir{margin-left:0;width:100%}
  .oc-adjunto .abrir .btn{width:100%;justify-content:center}
}