/**
 * ObjetivaCAD — Estilos UI vanilla
 * Paleta corporativa Objetiva: azul #003D7A primario, fondo blanco siempre.
 * Todo el CSS está namespaced con .ocad-* para no chocar con tu app.
 */
.ocad-root {
  --ocad-accent: #003D7A;
  --ocad-accent2: #0066CC;
  --ocad-bg: #ffffff;
  --ocad-panel: #ffffff;
  --ocad-panel-alt: #f7f9fc;
  --ocad-line: #e2e8f0;
  --ocad-ink: #0a1f3d;
  --ocad-ink2: #334155;
  --ocad-muted: #64748b;
  --ocad-ok: #047857;
  --ocad-err: #b91c1c;
  --ocad-shadow: 0 1px 2px rgba(10,31,61,.04), 0 4px 12px rgba(10,31,61,.06);
  --ocad-radius: 6px;
  font-family: -apple-system, Segoe UI, Roboto, Inter, sans-serif;
  font-size: 14px;
  color: var(--ocad-ink);
  background: var(--ocad-bg);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ocad-root *, .ocad-root *::before, .ocad-root *::after { box-sizing: border-box; }

/* Topbar */
.ocad-topbar {
  background: var(--ocad-accent); color: #fff; padding: 12px 22px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 2px 6px rgba(0,61,122,.18); flex-shrink: 0;
}
.ocad-brand { display: flex; align-items: center; gap: 12px; }
.ocad-brand .logo {
  width: 36px; height: 36px; background: #fff; color: var(--ocad-accent);
  border-radius: 4px; display: grid; place-items: center;
  font-weight: 800; font-size: 14px;
}
.ocad-brand .name { font-weight: 700; font-size: 1.1rem; color: #fff; }
.ocad-brand .tag {
  font-size: .7rem; color: rgba(255,255,255,.78);
  letter-spacing: .6px; text-transform: uppercase;
}
.ocad-topbar-actions {
  margin-left: auto; display: flex; gap: 10px; align-items: center;
  font-size: .85rem; color: rgba(255,255,255,.85);
}

/* Layout */
.ocad-app {
  display: grid; grid-template-columns: 340px 1fr 360px;
  flex: 1; min-height: 0;
}
.ocad-col {
  background: var(--ocad-panel); overflow-y: auto;
  border-right: 1px solid var(--ocad-line);
}
.ocad-col-right { border-right: 0; border-left: 1px solid var(--ocad-line); }
.ocad-col-mid { background: #fff; position: relative; overflow: hidden; }
.ocad-section {
  padding: 16px 18px; border-bottom: 1px solid var(--ocad-line);
}
.ocad-section h3 {
  margin: 0 0 10px; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ocad-muted); font-weight: 700;
}
.ocad-section h2 { margin: 0 0 12px; font-size: 1.05rem; }

/* Drop zone */
.ocad-drop {
  display: block; cursor: pointer;
  border: 2px dashed var(--ocad-line); border-radius: var(--ocad-radius);
  padding: 24px 14px; text-align: center;
  background: var(--ocad-panel-alt); transition: all .15s;
}
.ocad-drop:hover, .ocad-drop.drag {
  border-color: var(--ocad-accent); background: rgba(0,61,122,.08);
}
.ocad-drop .icon { font-size: 1.8rem; color: var(--ocad-accent); margin-bottom: 6px; }
.ocad-drop p { margin: 4px 0; color: var(--ocad-ink2); font-size: .85rem; }
.ocad-drop small { color: var(--ocad-muted); }

/* Lista predios */
.ocad-list { margin-top: 4px; }
.ocad-item {
  padding: 10px 12px; border: 1px solid var(--ocad-line);
  border-radius: var(--ocad-radius); margin-bottom: 8px;
  cursor: pointer; background: #fff; transition: all .15s;
}
.ocad-item:hover { border-color: var(--ocad-accent); background: var(--ocad-panel-alt); }
.ocad-item.active {
  border-color: var(--ocad-accent); background: rgba(0,61,122,.08);
  box-shadow: inset 3px 0 0 var(--ocad-accent);
}
.ocad-item .clave { font-weight: 600; font-size: .85rem; }
.ocad-item .meta { font-size: .75rem; color: var(--ocad-muted); margin-top: 3px; font-family: monospace; }
.ocad-item .actions { margin-top: 6px; display: flex; gap: 6px; }
.ocad-item .actions button { font-size: .7rem; padding: 3px 8px; }

/* Botones */
.ocad-btn {
  background: var(--ocad-accent); color: #fff; border: 0;
  border-radius: var(--ocad-radius); padding: 10px 16px; cursor: pointer;
  font-weight: 600; font-size: .85rem; transition: all .15s;
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
}
.ocad-btn:hover:not(:disabled) { background: #002b56; }
.ocad-btn:disabled { opacity: .4; cursor: not-allowed; }
.ocad-btn-block { width: 100%; }
.ocad-ghost {
  background: #fff; color: var(--ocad-ink2); border: 1px solid var(--ocad-line);
}
.ocad-ghost:hover:not(:disabled) {
  background: var(--ocad-panel-alt); color: var(--ocad-ink);
  border-color: var(--ocad-accent);
}
.ocad-danger { background: var(--ocad-err); }
.ocad-danger:hover:not(:disabled) { background: #991b1b; }
.ocad-btn-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-top: 10px;
}
.ocad-btn-row .ocad-btn { padding: 10px 8px; font-size: .78rem; }

/* Mapa */
.ocad-map { position: absolute; inset: 0; }
.ocad-map-info {
  position: absolute; top: 12px; left: 12px; z-index: 1000;
  background: rgba(255,255,255,.95); padding: 8px 12px;
  border-radius: var(--ocad-radius); box-shadow: var(--ocad-shadow);
  font-size: .8rem; font-family: monospace; border: 1px solid var(--ocad-line);
}
.ocad-tile-toggle {
  position: absolute; top: 12px; right: 12px; z-index: 1000;
  background: #fff; border-radius: var(--ocad-radius);
  box-shadow: var(--ocad-shadow); display: flex;
  border: 1px solid var(--ocad-line); overflow: hidden;
}
.ocad-tile-btn {
  padding: 6px 12px; border: 0; background: #fff; cursor: pointer;
  font-size: .78rem; border-right: 1px solid var(--ocad-line);
}
.ocad-tile-btn:last-child { border-right: 0; }
.ocad-tile-btn.active { background: var(--ocad-accent); color: #fff; }
.ocad-editor-toolbar {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  z-index: 1000; background: #fff; border-radius: var(--ocad-radius);
  box-shadow: var(--ocad-shadow); display: flex; border: 1px solid var(--ocad-line);
}
.ocad-editor-toolbar button {
  padding: 8px 14px; border: 0; background: #fff; cursor: pointer;
  font-size: .78rem; border-right: 1px solid var(--ocad-line);
}
.ocad-editor-toolbar button:last-child { border-right: 0; }
.ocad-editor-toolbar button:hover { background: var(--ocad-panel-alt); }
.ocad-editor-toolbar button.active { background: var(--ocad-accent); color: #fff; }

/* KPIs */
.ocad-kpi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.ocad-kpi {
  background: var(--ocad-panel-alt); padding: 10px 12px;
  border-radius: var(--ocad-radius); border-left: 3px solid var(--ocad-accent);
}
.ocad-kpi label {
  display: block; font-size: .7rem; color: var(--ocad-muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.ocad-kpi .val { font-size: 1.1rem; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ocad-kpi.green { border-left-color: var(--ocad-ok); }
.ocad-kpi.green .val { color: var(--ocad-ok); }

/* Tablas */
.ocad-tbl {
  width: 100%; border-collapse: collapse; font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
.ocad-tbl th, .ocad-tbl td {
  padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--ocad-line);
}
.ocad-tbl th {
  background: var(--ocad-panel-alt); color: var(--ocad-ink2);
  font-size: .7rem; text-transform: uppercase; font-weight: 600;
}
.ocad-tbl td.num { text-align: right; font-family: monospace; }

/* Tabs */
.ocad-tabs { display: flex; border-bottom: 1px solid var(--ocad-line); margin-bottom: 10px; }
.ocad-tabs button {
  flex: 1; padding: 8px; border: 0; background: transparent;
  cursor: pointer; font-size: .78rem; color: var(--ocad-muted);
  font-weight: 600; border-bottom: 2px solid transparent;
}
.ocad-tabs button.active {
  color: var(--ocad-accent); border-bottom-color: var(--ocad-accent);
}

/* Toasts */
.ocad-toasts {
  position: fixed; top: 80px; right: 20px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; max-width: 340px;
}
.ocad-toast {
  padding: 12px 16px; border-radius: var(--ocad-radius);
  background: #fff; box-shadow: var(--ocad-shadow);
  border-left: 4px solid var(--ocad-accent); font-size: .85rem;
  transition: opacity .3s;
}
.ocad-toast.ok { border-left-color: var(--ocad-ok); }
.ocad-toast.err { border-left-color: var(--ocad-err); }

/* Empty state */
.ocad-empty { text-align: center; padding: 30px 10px; color: var(--ocad-muted); }
.ocad-empty .ico { font-size: 2.5rem; margin-bottom: 8px; opacity: .3; }

/* Responsive */
.ocad-mobile-tabs {
  display: none; background: #fff; border-top: 1px solid var(--ocad-line);
  box-shadow: 0 -2px 8px rgba(10,31,61,.06); flex-shrink: 0;
}
.ocad-mobile-tabs button {
  flex: 1; padding: 10px 4px; background: transparent; border: 0;
  color: var(--ocad-muted); font-size: .75rem;
  border-top: 3px solid transparent; font-weight: 600; cursor: pointer;
}
.ocad-mobile-tabs button.active {
  color: var(--ocad-accent); border-top-color: var(--ocad-accent);
}

@media (max-width: 1100px) {
  .ocad-app { grid-template-columns: 300px 1fr 320px; }
}
@media (max-width: 900px) {
  .ocad-app { grid-template-columns: 1fr; }
  .ocad-col, .ocad-col-mid { display: none; }
  .ocad-col.active, .ocad-col-mid.active { display: block; }
  .ocad-mobile-tabs { display: flex; }
}