/* ── Oficina ─────────────────────────────────────────────────────────────
   Contratos con preaviso, el local y sus incidencias, el material y sus
   salidas. Solo tokens de base.css; toolbar, pestañas, tarjetas, tiles, chips
   y formularios son los de base.css («Primitivas de vista»). Los fondos
   suaves salen de color-mix sobre el mismo color del texto, así valen en
   claro y en oscuro. El desplazamiento de la vista lo da el armazón
   (layout.css `.view.active:has(>.view-wrap)`), no este fichero. */

/* Esqueleto de la primera carga: dos tiles + cuatro filas, sin «Cargando…» */
.ofn-skel{display:flex;flex-direction:column;gap:14px}
.ofn-skel-filas{display:flex;flex-direction:column;gap:8px}

/* Fila de contrato o de equipo: sin marco, hover en píldora. .fila ya trae el
   filete y la altura mínima (base.css); aquí solo la rejilla propia y el
   hover. .fila .hint trae margin-left:auto de base — con varios bloques por
   fila cada uno manda su propia posición, así que se anula aquí. */
.ofn-fila{cursor:pointer;padding:8px 6px;flex-wrap:wrap;transition:background var(--tr)}
.ofn-fila:hover{background:var(--sb-muted);border-radius:12px;border-top-color:transparent}
.ofn-fila .hint{margin-left:0}
.ofn-fila-nom{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:1px}
.ofn-fila-nom b{font-size:13.5px;font-weight:500}
.ofn-fila-est{flex:1 1 190px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px}   /* la ficha de estado, a su ancho */
.ofn-fila-imp{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:auto}
.ofn-fila-imp i{font-style:normal;font-weight:400;font-size:11px;color:var(--c-text3)}

/* Incidencias: la fila de alta y el expediente */
.ofn-inc-t{flex:1 1 180px;min-width:0;display:flex;flex-direction:column}
.ofn-inc-t b{font-size:13px}
.ofn-inc-m{display:flex;align-items:center;gap:9px;margin-left:auto;flex-shrink:0}
.ofn-nada{padding:8px 0}
.ofn-add{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px;align-items:center}
.ofn-add .form-input,.ofn-add .form-select{flex:1 1 170px;width:auto;min-width:0}
.ofn-add-par{display:flex;gap:7px;align-items:center;flex:1 1 300px;min-width:0}
.ofn-inc-prov{flex:0 1 150px!important}
.ofn-inc-coste{flex:0 1 90px!important}

/* Formulario del contrato */
.ofn-modal{width:640px;max-width:100%}

/* ── La incidencia como expediente ──────────────────────────────────────── */
.ofn-inc-resumen{display:flex;gap:7px;flex-wrap:wrap;padding:2px 0 10px}

.ofn-inc{border-top:1px solid var(--c-border)}
.card-h+.ofn-inc,.ofn-inc-resumen+.ofn-inc{border-top:none}
.ofn-inc.e-resuelta{opacity:.6}
.ofn-inc.e-resuelta .ofn-inc-t b{color:var(--c-text3)}
.ofn-inc-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;width:100%;
  border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.ofn-espera{font-size:11px;font-weight:600;color:var(--c-text3);white-space:nowrap}
.ofn-espera.mal{color:var(--c-red)}
.ofn-av-vacio{background:var(--c-surface2);color:var(--c-text3);border:1px dashed var(--c-border2);font-weight:700}

/* El recorrido de una incidencia, en neutro: la atención la lleva el chip del
   estado, no el color de estos pasos. */
.ofn-pasos{display:flex;align-items:center;gap:4px;flex:0 0 auto;flex-wrap:wrap}
.ofn-paso{width:16px;height:4px;border-radius:2px;background:var(--c-border);flex-shrink:0}
.ofn-paso.hecho{background:var(--c-text3);opacity:.55}
.ofn-paso.actual{background:var(--c-text);width:22px}
.ofn-paso.no{background:var(--c-red)}
.ofn-paso-lbl{font-size:11px;font-weight:700;margin-left:5px;white-space:nowrap;color:var(--c-text2)}

.ofn-inc-detalle{padding:6px 0 14px}
.ofn-inc-det{font-size:12.5px;color:var(--c-text2);line-height:1.6;margin:0 0 12px}

.ofn-presus{display:flex;flex-direction:column;gap:8px}
.ofn-presu{display:flex;align-items:center;gap:9px;padding:6px 0}
.ofn-presu-marcar{color:var(--c-text3);display:inline-flex;align-items:center;justify-content:center}
.ofn-presu-marcar .ic{font-size:20px;vertical-align:0}
.ofn-presu.elegido .ofn-presu-marcar{color:var(--c-green)}
.ofn-presu-t{flex:1;min-width:0;display:flex;flex-direction:column}
.ofn-presu-t b{font-size:12.5px}
.ofn-presu-t .hint{margin-left:0}
.ofn-presu.elegido .ofn-presu-t b{color:var(--c-green)}
.ofn-presu-i{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ofn-inc-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:14px;padding-top:10px;border-top:1px solid var(--c-border)}

/* ── Material ───────────────────────────────────────────────────────────── */
.ofn-mat{display:flex;align-items:center;gap:10px;padding:8px 0;flex-wrap:wrap}
.ofn-mat+.ofn-mat{border-top:1px solid var(--c-border)}
.ofn-mat-t,.ofn-sal .ofn-mat-t{flex:1 1 190px;min-width:0;display:flex;flex-direction:column}
.ofn-mat-t b{font-size:13px}
.ofn-mat-m{display:flex;align-items:center;gap:7px;margin-left:auto;flex-wrap:wrap}
.ofn-mini-sel{width:auto}
.ofn-mat-det{display:flex;flex-direction:column;gap:12px;padding:6px 0 12px}
.form-group .ofn-mini-sel{width:100%}
.ofn-urgente{margin:6px 0 10px}

/* Categorías del inventario: cerrada es una fila más; abierta toma el mismo
   relleno gris que agrupa controles en toda la app (.card.relleno). */
.ofn-maleta+.ofn-maleta{border-top:1px solid var(--c-border)}
.ofn-maleta-h{display:flex;align-items:center;gap:9px;width:100%;padding:9px 0;
  background:none;border:0;cursor:pointer;text-align:left;color:inherit;font:inherit}
.ofn-maleta-h b{font-size:13px}
.ofn-maleta-fl{color:var(--c-text3);display:inline-flex;flex-shrink:0}
.ofn-maleta-fl .ic{font-size:18px;vertical-align:0}
.ofn-mat-maleta{flex:0 0 120px;min-width:0}

.ofn-sal{display:flex;align-items:center;gap:10px;padding:9px 0;width:100%;
  border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;flex-wrap:wrap;border-radius:12px}
.ofn-sal+.ofn-sal{border-top:1px solid var(--c-border)}
.ofn-sal:hover{background:var(--sb-muted)}
.ofn-sal.cerrada{opacity:.6}

.ofn-sal-nueva{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.ofn-sal-nueva .form-input{flex:1 1 auto;width:170px;min-width:0}

.ofn-sal-head{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.ofn-sal-tit{flex:1 1 200px;min-width:0;display:flex;flex-direction:column}
.ofn-sal-tit b{font-size:15px}
.ofn-sal-pie{display:flex;justify-content:flex-end}

/* La casilla de "cargado" es el gesto principal: grande y con toda la fila
   como zona de toque, que esto se usa de pie y con prisa. Tinta, no acento. */
.ofn-check{cursor:pointer;user-select:none}
.ofn-check:hover{background:var(--sb-muted);border-radius:12px;border-top-color:transparent}
.ofn-check>input[type=checkbox]{width:19px;height:19px;flex:0 0 auto;accent-color:var(--c-text);cursor:pointer}
.ofn-check>input:checked+.ofn-mat-t b{text-decoration:line-through;color:var(--c-text3)}
.ofn-vuelta.pendiente{background:color-mix(in srgb,var(--c-red) 5%,transparent);border-radius:7px;padding-left:8px;padding-right:8px}
.ofn-vuelta.pendiente .ofn-mat-t .hint{color:var(--c-red)}
.ofn-vuelta-ok{display:flex;align-items:center;gap:5px;font-size:12px;cursor:pointer;white-space:nowrap}
.ofn-vuelta-ok input{width:17px;height:17px;accent-color:var(--c-green);cursor:pointer}

/* Extras de una salida: texto libre para lo que no está en el inventario */
.ofn-extras-ta{width:100%;min-height:64px;resize:vertical;font-family:inherit;line-height:1.5;margin-top:8px}
.ofn-extras-ro{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--c-text2);white-space:pre-wrap}
.ofn-add-extra{margin-top:8px}
.ofn-extra-cant{max-width:72px}

/* Una salida sin maletas todavía: una línea de ayuda, no una tarjeta */
.ofn-sinmaletas{padding:8px 0;line-height:1.55}

/* Importar pegando desde Excel: el tamaño y el resize los da .form-textarea */
.ofn-pegar{font-family:var(--font-mono);white-space:pre}

/* ── Móvil ──────────────────────────────────────────────────────────────── */
@media (max-width:768px), ((hover:none) and (pointer:coarse) and (max-width:1400px)){
  .ofn-fila-nom,.ofn-fila-est{flex:1 1 100%}
  .ofn-fila-imp{margin-left:0}
  .ofn-inc-h{gap:8px}
  .ofn-inc-m{margin-left:0;width:100%;flex-wrap:wrap;gap:6px}
  .ofn-add,.ofn-add-par{flex-direction:column}
  .ofn-add-par{flex:none;width:100%}
  .ofn-add .form-input,.ofn-add .form-select,.ofn-inc-prov,.ofn-inc-coste{flex:1 1 auto!important;width:100%}
  .ofn-add .btn,.ofn-inc-pie .btn{width:100%;min-height:40px}
  .ofn-inc-pie{flex-direction:column;align-items:stretch}
  /* Material y salidas: se usa de pie con el móvil */
  .ofn-mat{gap:8px}
  .ofn-mat-m{margin-left:0;width:100%}
  .ofn-mat-m .form-select{flex:1 1 40%;min-width:0}
  .ofn-mat-maleta{flex:1 1 100%}
  /* Checklist de salida: la maleta y la X en una sola línea */
  .ofn-check .ofn-mat-m{flex-wrap:nowrap}
  .ofn-check .ofn-mat-maleta{flex:1 1 0}
  #view-oficina .card-h-r:has(.ofn-sal-nueva){flex-basis:100%;margin-left:0}
  .ofn-sal-nueva,.ofn-sal-nueva .form-input{flex:1 1 100%}
  .ofn-sal-nueva .btn,.ofn-sal-pie .btn{width:100%;min-height:40px}
  .ofn-sal-head{gap:8px}
  .ofn-sal-pie{justify-content:stretch}
  .ofn-check{padding:10px 8px;margin:0 -8px}
  .ofn-check>input[type=checkbox],.ofn-vuelta-ok input{width:22px;height:22px}
  .ofn-vuelta-ok{min-height:32px;font-size:13px}
  .ofn-vuelta.pendiente{padding-left:8px;padding-right:8px}
  .ofn-extra-cant{max-width:none}
}