/* ============================================================
   TROPICO TOSTADORES — Módulo "Máquinas OCS"
   Todas las reglas van scopeadas bajo .ocs (raíz de la vista) o bajo
   prefijos ocs-* para no afectar el resto de la SPA. Excepción única:
   .ocs-nav-badge, que vive en el sidebar (fuera de .ocs) — ver comentario.
   Reutiliza variables y componentes de app.css (card, btn, form-control,
   badge, plan-tab, tabla-wrapper): no se redefinen acá.
   ============================================================ */

.ocs { animation: fadeIn 0.4s ease; }

/* ---- Pestañas (mismo patrón visual que .plan-tab, contenedor propio) --- */
.ocs .ocs-tabs {
  display: flex; gap: 4px; margin-bottom: 20px;
  border-bottom: 2px solid var(--c-border);
  overflow-x: auto; white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.ocs .ocs-tabs::-webkit-scrollbar { height: 4px; }

/* ---- Sub-pestañas de Catálogos (botones simples, no la barra principal) */
.ocs .ocs-subtabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.ocs .ocs-subtab.btn-primary { background: var(--c-accent); color: #fff; }

/* ---- Secciones dentro de tarjetas (ficha de cliente, catálogos, etc.) -- */
.ocs .ocs-seccion-tit { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--c-text); }
.ocs .ocs-seccion-tit-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ocs .ocs-seccion-tit-row .ocs-seccion-tit { margin-bottom: 0; }

/* ---- Grilla de datos de solo lectura (ficha de cliente) ---------------- */
.ocs .ocs-datos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px 20px; font-size: 13px;
}

/* ---- Columnas secundarias: ocultas en pantallas angostas (§7 diseño) --- */
@media (max-width: 720px) {
  .ocs .ocs-col-sec { display: none; }
}

/* ---- Placeholder "en construcción" para pestañas de otros agentes ------ */
.ocs .ocs-en-construccion {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 60px 20px; text-align: center; color: var(--c-text-muted);
}
.ocs .ocs-construccion-ic { font-size: 28px; opacity: 0.6; }
.ocs .ocs-construccion-txt { font-size: 13px; }

/* ---- Gráfico SVG genérico (App.OCS.grafico) ---------------------------- */
.ocs .ocs-svg { display: block; overflow: visible; }
.ocs .ocs-graf-vacio { padding: 30px 0; text-align: center; }
.ocs-bar { transition: opacity 0.15s; }
.ocs-bar:hover { opacity: 0.85; }
.ocs-bar-estimado { fill-opacity: 0.55; stroke: var(--c-text-muted); stroke-width: 1; stroke-dasharray: 3 2; }
.ocs-linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ocs-linea-punteada { stroke-dasharray: 6 4; }
.ocs-punto { stroke: var(--c-surface); stroke-width: 1.2; }

/* ---- Diagnóstico (Configuración) --------------------------------------- */
.ocs .ocs-diag-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px 20px; font-size: 13px;
}

/* ---- Fotos / adjuntos: grilla de miniaturas con carga diferida --------- */
.ocs-foto-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.ocs-foto-item { position: relative; width: 84px; height: 84px; }
.ocs-foto-thumb {
  width: 100%; height: 100%; border-radius: 8px; border: 1px solid var(--c-border);
  background: var(--c-bg) center/cover no-repeat; cursor: pointer; transition: opacity 0.15s;
}
.ocs-foto-thumb:hover { opacity: 0.85; }
.ocs-foto-doc {
  width: 100%; height: 100%; border-radius: 8px; border: 1px dashed var(--c-border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; font-size: 22px; cursor: pointer; background: var(--c-surface); padding: 4px;
}
.ocs-foto-doc span { font-size: 9px; color: var(--c-text-muted); text-align: center; word-break: break-word; line-height: 1.2; max-height: 22px; overflow: hidden; }
.ocs-foto-del {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-accent); color: #fff; border: 2px solid var(--c-surface); cursor: pointer;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0;
}
.ocs-foto-add {
  width: 84px; height: 84px; border-radius: 8px; border: 2px dashed var(--c-border);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  color: var(--c-text-muted); cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.ocs-foto-add:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* ---- Visor de imagen (modal) -------------------------------------------- */
.ocs-visor-wrap { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.ocs-visor-img { max-width: 100%; max-height: 70vh; border-radius: 8px; }

/* ---- Badge "carga pendiente" en el ítem de menú -------------------------
   Vive dentro de .nav-item (sidebar), fuera de .ocs: es la única excepción
   al scope, porque decora un elemento del shell principal, no de la vista. */
.ocs-nav-badge {
  margin-left: auto; background: var(--c-accent); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 6px;
  border-radius: 10px; flex-shrink: 0;
}

/* ---- Filtros de la lista de máquinas (F05) ------------------------------ */
.ocs .form-row { flex-wrap: wrap; }

/* ---- Destino del movimiento: botones grandes tipo radio (F06) ---------- */
.ocs-destino-radios { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ocs-destino-radio {
  flex: 1 1 100px; min-height: 44px; padding: 10px 12px; border-radius: 10px;
  border: 2px solid var(--c-border); background: var(--c-surface); color: var(--c-text-mid);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ocs-destino-radio.active { border-color: var(--c-accent); color: var(--c-accent); background: rgba(163,25,22,0.06); }
.ocs-mov-preview { margin: 10px 0; padding: 8px 12px; background: var(--c-bg); border-radius: 8px; }
.ocs-mov-confirm { margin-top: 12px; padding: 12px; border-radius: 10px; background: rgba(163,25,22,0.06); border: 1px solid var(--c-accent-dim, var(--c-accent)); }
.ocs-mov-confirm-lista { margin: 8px 0; padding-left: 18px; font-size: 12.5px; color: var(--c-text-mid); max-height: 140px; overflow-y: auto; }

/* ---- Repuestos: filas dinámicas (F06, Formulario Evento) ---------------- */
.ocs-repuesto-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.ocs-repuesto-row .form-control { flex: 1; }

/* ---- Timeline de eventos de una máquina (F05) --------------------------- */
.ocs-tl-filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ocs-timeline { display: flex; flex-direction: column; gap: 14px; }
.ocs-tl-item { display: flex; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--c-border); }
.ocs-tl-item:last-child { border-bottom: none; padding-bottom: 0; }
.ocs-tl-ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--c-bg); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.ocs-tl-body { flex: 1; min-width: 0; }
.ocs-tl-cab { margin-bottom: 2px; }
.ocs-tl-fotos { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.ocs-tl-thumb { width: 48px; height: 48px; }

/* ---- Compras: fila "pendiente" resaltada (F07) -------------------------- */
.ocs-cmp-pendiente { background: rgba(186,117,23,0.07); }

/* ---- Dashboard OCS: alertas y ranking (F08) ------------------------------ */
.ocs-alertas { display: flex; flex-direction: column; gap: 6px; }
.ocs-alerta-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  font-size: 13px; cursor: pointer; transition: background 0.15s;
}
.ocs-alerta-item:hover { background: var(--c-bg); }
.ocs-alerta-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--c-text-muted); }
.ocs-alerta-alta .ocs-alerta-dot { background: var(--c-accent); }
.ocs-alerta-media .ocs-alerta-dot { background: var(--c-orange); }
.ocs-alerta-baja .ocs-alerta-dot { background: var(--c-green); }

/* ============================================================
   MOBILE (< 720px) — formularios y catálogos usables en 375px
   ============================================================ */
@media (max-width: 720px) {
  .ocs .ocs-tabs { gap: 2px; }
  .ocs .plan-tab { padding: 8px 10px; font-size: 13px; }
  .ocs .ocs-datos-grid { grid-template-columns: 1fr 1fr; }
  .ocs .ocs-diag-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .ocs .ocs-datos-grid { grid-template-columns: 1fr; }
  .ocs .ocs-foto-item, .ocs-foto-add { width: 72px; height: 72px; }
}

/* Modales de Mover / Evento / Corrección (F06): se renderizan fuera de .ocs
   (App.abrirModal cuelga del <body>), por eso estas reglas no van scopeadas. */
@media (max-width: 720px) {
  .ocs-destino-radio { min-width: 90px; }
  .ocs-repuesto-row { flex-wrap: wrap; }
  .ocs-repuesto-row .form-control { min-width: 100px; }
}